其实全局刷新和局部刷新的实现方式仅仅是几行的区别，就是setData的时候，key对应的是所有数据源还是对应的是数据源中的某个字段，仅此而已。
全部刷新粗暴简单，直接将整个数据源赋值到视图层即可，数据源少的话，用全局刷新就可以，性能影响不是很大。
局部刷新稍微麻烦一点点，将某条数据复制到视图层即可，好处就是只会更新指定行的内容。数据量大的数据，最好用局部刷新，否则所有数据一股脑全部更新，对性能影响可想而知。
案例一： 求职意向界面
全局刷新-核心代码
this.setData({
jobListData: this.data.jobListData
})
局部刷新-核心代码
var selectStatusChanged = "jobListData[" + parentIndex + "].item[" + index + "].type";
this.setData({
// "jobListData[0].item[4].type":1,// 选中指定标签。选中第1个大类目下的第5个标签。
[selectStatusChanged]: this.data.jobListData[parentIndex].item[index].type,// 动态选中/取消选中标签
})
案例一总览(全部代码)
- 项目需求：每个职位都可以选中也可以取消选中，但最多选择6个职位，当选中完职位保存之后，下次进入该界面要将之前选中的数据标记为选中。
- 分析问题：
- 要处理的问题1：进入该界面要将之前选中的数据标记为选中。
------>做法：这个很简单，后台返回的数据中每个职位都带有一个type字段后台定义如下：【type为0：未选中；type为1：选中】,我们就不需要额外操作数据源增加type字段。所以只需在wxml文件中判断type的值来使用noSelect还是hasSelect选择器即可。 - 要处理的问题2：选中/取消选中某个标签，刷新这个标签的状态。
------>做法：操作数据源。先在wxml文件中为每个标签绑定标签的id，当选中/取消选中某行时，for循环遍历数据源，如果数据源中的某个id等于该行，就更改数据源的type的值。然后使用setData({})全部刷新或者局部刷新页面即可。
- 要处理的问题1：进入该界面要将之前选中的数据标记为选中。
数据源
{
"code": 1,
"msg": "查询成功!",
"data": [
{
"id": 1,
"name": "营销宣传",
"parentid": 0,
"speciality_img_url": "http://ymzp.0633hr.com/upload/default/20190701/7f6df1b3ef645c5aa43e41c15deec7ee.png",
"item": [
{
"id": 2,
"name": "销售",
"parentid": 1,
"speciality_img_url": "",
"type": 1
},
{
"id": 3,
"name": "促销导购",
"parentid": 1,
"speciality_img_url": "",
"type": 0
},
{
"id": 4,
"name": "传单派发",
"parentid": 1,
"speciality_img_url": "",
"type": 1
},
{
"id": 5,
"name": "地推拉访",
"parentid": 1,
"speciality_img_url": "",
"type": 0
},
{
"id": 6,
"name": "营业员",
"parentid": 1,
"speciality_img_url": "",
"type": 0
},
{
"id": 7,
"name": "客服话务",
"parentid": 1,
"speciality_img_url": "",
"type": 1
}
]
},
{
"id": 8,
"name": "旅游餐饮",
"parentid": 0,
"speciality_img_url": "http://ymzp.0633hr.com/upload/default/20190701/57240ee093568f032a5d43e6c49fe983.png",
"item": [
{
"id": 9,
"name": "服务员",
"parentid": 8,
"speciality_img_url": "",
"type": 1
},
{
"id": 10,
"name": "传菜员",
"parentid": 8,
"speciality_img_url": "",
"type": 0
},
{
"id": 11,
"name": "厨师",
"parentid": 8,
"speciality_img_url": "",
"type": 1
},
{
"id": 12,
"name": "面点师",
"parentid": 8,
"speciality_img_url": "",
"type": 1
}
]
}
]
}
wxml文件
<!--pages/hire/work_intension/work_intension.wxml-->
<view class='intensionContain'>
<!-- 使用 wx:for-index 自定义jobListData中的每个模型索引,索引为ParentIndex-->
<!-- 使用 wx:for-item 自定义jobListData中的每个模型对象,模型对象为ParentIndex-->
<view class='section' wx:for="{{jobListData}}" wx:for-index="ParentIndex" wx:for-item="ParentItem" wx:key="index" >
<view class="intensionType">
<image src="{{ParentItem.speciality_img_url}}"></image>
<view>{{ParentItem.name}}</view>
</view>
<view class="intensionItem" >
<!-- 使用 wx:for-index 自定义item中的每个模型索引,索引为ChildIndex-->
<!-- 使用 wx:for-item 自定义item中的每个模型对象,模型对象为ChildItem-->
<block wx:for="{{ParentItem.item}}" wx:for-item="ChildItem" wx:for-index="ChildIndex" wx:key="index" >
<view bindtap='workBtnClick' data-parentindex="{{ParentIndex}}" data-index="{{ChildIndex}}" data-id="{{ChildItem.id}}" data-name="{{ChildItem.name}}">
<!-- 模型中的type为0，即为未选中，1未选中-->
<view class="{{ChildItem.type== 0 ? 'noSelect' : 'hasSelect'}}">{{ChildItem.name}}</view>
</view>
</block>
</view>
</view>
</view>
<view class='saveBtn' bindtap='setUserSpeciality'>保存</view>
js文件(主要逻辑在workBtnClick函数中)
// pages/hire/work_intension/work_intension.js
var common = require("../../../public.js");
var HttpUrl = common.HttpUrl
var ImgUrl = common.ImgUrl
var app = getApp();
// 已选工种id数组
var hasSelectWorkId = [];
// 已选工种标题数组
var hasSelectWorkName = [];
// 已选工种json数据(返回其余页面专用)
var workArrayJsonData = [];
// 之前选中过
var existHasSelect = false;
Page({
/**
* 页面的初始数据
*/
data: {
jobListData: [],
},
// 修改数据源
modifyDataSource: function (type, id) {
for (var i = 0; i < this.data.jobListData.length; i++) {
for (var j = 0; j < this.data.jobListData[i].item.length; j++) {
if (this.data.jobListData[i].item[j].id == id) {
// console.log("匹配到了一个" + id);
this.data.jobListData[i].item[j].type = type;
}
}
}
},
// 工种点击
workBtnClick: function (e) {
var id = e.currentTarget.dataset.id;
var index = e.currentTarget.dataset.index;
var name = e.currentTarget.dataset.name;
var parentIndex = e.currentTarget.dataset.parentindex;
console.log("item为" + JSON.stringify(e.currentTarget.dataset.parentindex));
// console.log("id为" + id + "index为" + index + "name为" + name);
for (var i = 0; i < hasSelectWorkId.length; i++) {
// 本次选了之前选中的标签，就把该标签对应的id和name从以下数组中删掉
// 还要将该标签在数据源中的选中状态type置0
if (hasSelectWorkId[i] == id) {
hasSelectWorkId.splice(hasSelectWorkId.indexOf(hasSelectWorkId[i]), 1);
hasSelectWorkName.splice(hasSelectWorkName.indexOf(hasSelectWorkName[i]), 1);
existHasSelect = true;
// 该标签在数据源中的选中状态type置0
this.modifyDataSource(0, id);
}
}
if (hasSelectWorkId.length == 6) {
wx.showToast({
title: '最多选择6个',
icon: 'none',
duration: 2000
})
return;
}
if (existHasSelect == false) {// 之前没选中一样的
hasSelectWorkId.push(id);
hasSelectWorkName.push(name);
console.log("数组内容" + this.data.jobListData);
// 该标签在数据源中的选中状态type置1
this.modifyDataSource(1, id);
} else {// 选中过一样的
existHasSelect = false;
}
// 全局刷新
// this.setData({
// jobListData: this.data.jobListData
// })
// 局部刷新
var selectStatusChanged = "jobListData[" + parentIndex + "].item[" + index + "].type";
this.setData({
// "jobListData[0].item[4].type":1,// 选中指定标签。选中第1个大类目下的第5个标签。
[selectStatusChanged]: this.data.jobListData[parentIndex].item[index].type,// 动态选中/取消选中标签
})
},
// 工种存储
setUserSpeciality: function () {
var that = this;
if (hasSelectWorkId.length == 0) {
wx.showToast({
title: '请选择工种',
icon: 'none',
duration: 2000
})
return;
}
var workContent = hasSelectWorkId.join(',');
wx.showLoading({
title: '保存中...',
})
common.wxRequest("public/set_user_speciality", "post", {
arr_speciality: workContent,
}, function () {
}, function (e) {
console.log("数据为" + JSON.stringify(e));
setTimeout(function () {
wx.hideLoading()
}, 2000)
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
for (var i = 0; i < hasSelectWorkId.length; i++) {
var workJson = {};
workJson.id = hasSelectWorkId[i];
workJson.name = hasSelectWorkName[i];
workArrayJsonData.push(workJson);
}
prevPage.execScriptFunc(workArrayJsonData);
wx.navigateBack({});
})
},
// 求职意向-获取所有工作类型
getJobList: function () {
var that = this;
common.wxRequest("public/get_joblist", "post", {
}, function () {
}, function (e) {
// console.log("数据为" + JSON.stringify(e));
// 首次请求数据，将全部数据显示到视图层
that.setData({
jobListData: e.data
})
// 存储数据源中已选标签的id和name
for (var i = 0; i < e.data.length; i++) {
for (var j = 0; j < e.data[i].item.length; j++) {
if (e.data[i].item[j].type == 1) {
hasSelectWorkId.push(e.data[i].item[j].id);
hasSelectWorkName.push(e.data[i].item[j].name);
}
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 数组要清空下，否则返回页面再次进入该界面，之前数组中存储的值还在
// 已选工种id数组
hasSelectWorkId = [];
// 已选工种标题数组
hasSelectWorkName = [];
// 已选工种json数据(返回其余页面专用)
workArrayJsonData = [];
// 求职意向
this.getJobList();
},
})
wxss文件
/* pages/hire/work_intension/work_intension.wxss */
.intensionContain {
padding: 24rpx;
}
.section {
margin-bottom: 28px;
}
.section:last-of-type {
margin-bottom: 0;
}
.intensionType {
font-size: 15px;
display: flex;
align-items: center;
margin-bottom: 6px;
padding: 0 3px;
}
.intensionType image {
width: 25px;
height: 25px;
margin-right: 8px;
}
.intensionItem {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.intensionItem>view {
width: 25%;
text-align: center;
font-size: 14px;
padding: 6px 3px;
}
/* .intensionItem>view>view {
width: 100%;
height: 32px;
line-height: 32px;
background: #f7f7f7;
border-radius: 20px;
} */
.hasSelect {
width: 100%;
height: 32px;
line-height: 32px;
background:#ff9829;
color: #ffffff;
border-radius: 20px;
}
.noSelect {
width: 100%;
height: 32px;
line-height: 32px;
background: #f7f7f7;
border-radius: 20px;
}
.saveBtn{
margin: 24rpx;
background: #ff9829;
color: #fff;
text-align: center;
height: 96rpx;
line-height: 96rpx;
border-radius: 5px;
margin-top: 0;
}
效果截图
image.png
动画效果
101.1755231.gif
案例二： 报名管理界面
全局刷新-核心代码
this.setData({
orderJoinListData: this.data.orderJoinListData,
allselectValue: this.data.allselectValue,
hasSelectPerson: this.data.hasSelectPerson,
});
局部刷新-核心代码
var selectStatusChanged = "orderJoinListData[" + this.data.selectType + "][" + index + "].select";
this.setData({
// "orderJoinListData[1][1].select":true,// 选中指定的人。选中待结算类目下的第2个标签。
[selectStatusChanged]: this.data.orderJoinListData[this.data.selectType][index].select,// 动态选中/取消选中标签
allselectValue: this.data.allselectValue,
hasSelectPerson: this.data.hasSelectPerson,
})
案例二总览(全部代码)
- 项目需求：4个标签显示不同的列表数据且每个标签有不同的功能按钮(拒绝、录用、取消录用、结算工资、重新录用、评价等)。重要的有多个人报名时，需要有批量拒绝、录用......等功能。
- 分析问题：
- 要处理的问题1：4个标签的功能按钮过多且有批量处理功能。解决这个问题也很简单：每个标签对应一个界面。当然也可以使用每个标签拥有自己的独立的view。4个标签那么wxml页面要有4个大的view分别数据这4个标签。
- 要处理的问题2：既然每个标签拥有自己的独立的view，那么列表的数据如何存储呢。解决办法：对于数据源的存储，也要做一下处理，这里需要一个二维数组，一个大的数组里面包含4个数组，分别存储4个标签下的列表数据。
- 要处理的问题3：单个选中/取消选中某个标签，刷新这个标签的状态。
------>做法：操作数据源。先在wxml文件中为每个标签绑定标签的user_id，当选中/取消选中某行时，for循环遍历数据源，如果数据源中的某个user_id等于该行，就更改数据源的select的值。然后使用setData({})全部刷新或者局部刷新页面即可。
数据源
- 待结算状态下的数据源
{
"code": 1,
"msg": "查询成功!",
"data": [
{
"user_id": 37426,
"user_nickname": "CoderZb",
"birthday": 30,
"user_login": "19300000002",
"sex": 2,
"avatar": "app/2019-08-17/1566008473713-2019-08-17.jpg",
"type": 1,
"share_name": "平台"
},
{
"user_id": 37716,
"user_nickname": "刘畅",
"birthday": 30,
"user_login": "19300000008",
"sex": 2,
"avatar": "app/2019-08-14/1565763771800-2019-08-14.jpg",
"type": 1,
"share_name": "平台"
},
{
"user_id": 38447,
"user_nickname": "李佳琦",
"birthday": 19,
"user_login": "19300000009",
"sex": 2,
"avatar": "app/2019-08-14/1565763655760-2019-08-14.jpg",
"type": 1,
"share_name": "平台"
}
]
}
wxml文件
<!--pages/layer/enroll_management/enroll_management.wxml-->
<view class='tabContainter'>
<view class="choiceModule {{selectType==0 ? 'ifChoice' : ''}}" data-current="0" bindtap="swichNav">
待录用
<view class='orActiveBg'></view>
</view>
<view class="choiceModule {{selectType==1 ? 'ifChoice' : ''}}" data-current="1" bindtap="swichNav">
待结算
<view class='orActiveBg'></view>
</view>
<view class="choiceModule {{selectType==2 ? 'ifChoice' : ''}}" data-current="2" bindtap="swichNav">
已完成
<view class='orActiveBg'></view>
</view>
<view class="choiceModule {{selectType==3 ? 'ifChoice' : ''}}" data-current="3" bindtap="swichNav">
未录用
<view class='orActiveBg'></view>
</view>
</view>
<view class='listbox' wx:if="{{selectType==0}}">
<block wx:if="{{orderJoinListData[selectType].length != 0}}">
<view class='listItem' wx:for="{{orderJoinListData[selectType]}}" wx:key="index">
<view class='itemDetail'>
<block wx:if="{{mutiWordShow[selectType]}}">
<view class="choice">
<text wx:if="{{item.select}}" data-id="{{item.user_id}}" data-index="{{index}}" class="iconfont icon-xuanzhong" bindtap="circleClick"></text>
<text wx:else data-id="{{item.user_id}}" data-index="{{index}}" class="iconfont noChoice" bindtap="circleClick"></text>
</view>
</block>
<view>
<image src='{{item.splicingAvatar}}' data-userid="{{item.user_id}}" bindtap="bindResume" style='width:90rpx;height:90rpx;border-radius:5px;'></image>
</view>
<view class='boxRight'>
<view class='boxName'>{{item.user_nickname}}</view>
<view class='sexAndage'>
<text wx:if="{{item.sex == 1}}">男</text>
<text wx:else>女</text>
<text class='columnLine'></text>
<text>{{item.birthday}}岁</text>
</view>
</view>
</view>
<view class='btnBox'>
<view data-id="{{item.user_id}}" bindtap="refuseClick">
<button class='onRefuse'>拒绝</button>
</view>
<view class='onUse' data-id="{{item.user_id}}" bindtap="adoptClick">
<button>录用</button>
</view>
</view>
</view>
<block wx:if="{{!mutiWordShow[selectType]}}">
<view class="batchBtn" data-type="{{selectType}}" bindtap="multiClick">批量</view>
</block>
<block wx:else>
<view class="footer" id="hired" style="display:flex">
<view bindtap="allSelect" style="width:34%;">
<text wx:if="{{allselectValue[selectType]}}" class="iconfont icon-xuanzhong"></text>
<text wx:else class="iconfont noChoice"></text>
<text>全选</text>
</view>
<view class="groupNotice" data-type="{{selectType}}" bindtap="multiFinish">
<text class="borderSpan">完成</text>
</view>
<view class="refuseBtn" style="width:34%;" data-type="4" bindtap="refuseAndAdoptMultiClick">
<text class="borderSpan">拒绝</text>
</view>
<view class="employBtn" style="width:34%;" data-type="1" bindtap="refuseAndAdoptMultiClick">
<text>录用</text>
</view>
</view>
</block>
</block>
<block wx:else>
<view class='noneData'>
<view class='iconfont icon-zanwudingdan'></view>
<view>暂无职位</view>
</view>
</block>
</view>
<view class='listbox' wx:if="{{selectType==1}}">
<block wx:if="{{orderJoinListData[selectType].length != 0}}">
<view class='listItem' wx:for="{{orderJoinListData[selectType]}}" wx:key="index">
<view class='itemDetail'>
<block wx:if="{{mutiWordShow[selectType]}}">
<view class="choice">
<text wx:if="{{item.select}}" data-id="{{item.user_id}}" data-index="{{index}}" class="iconfont icon-xuanzhong" bindtap="circleClick"></text>
<text wx:else data-id="{{item.user_id}}" data-index="{{index}}" class="iconfont noChoice" bindtap="circleClick"></text>
</view>
</block>
<view>
<image src='{{item.splicingAvatar}}' style='width:90rpx;height:90rpx;border-radius:5px;'></image>
</view>
<view class='boxRight'>
<view class='boxName'>{{item.user_nickname}}</view>
<view class='sexAndage'>
<text wx:if="{{item.sex == 1}}">男</text>
<text wx:else>女</text>
<text class='columnLine'></text>
<text>{{item.birthday}}岁</text>
</view>
</view>
</view>
<view class='btnBox'>
<view data-id="{{item.user_id}}" bindtap="refuseAdoptClick">
<button class='onRefuse'>取消录用</button>
</view>
<view class='onUse'>
<button data-user_id='{{item.user_id}}' data-order_type='{{item.order_type}}' data-name='{{item.user_nickname}}' data-avatar='{{item.avatar}}' bindtap="settleOneSalaryClick" >结算工资</button>
</view>
</view>
</view>
<block wx:if="{{!mutiWordShow[selectType]}}">
<view class="batchBtn" data-type="{{selectType}}" bindtap="multiClick">批量</view>
</block>
<block wx:else>
<view class="footer" id="hired" style="display:flex">
<view bindtap="allSelect" style="width:20%;">
<text wx:if="{{allselectValue[selectType]}}" class="iconfontBottom icon-xuanzhong"></text>
<text wx:else class="iconfontBottom noChoice"></text>
<text>全选</text>
</view>
<view class="groupNotice" style="width:20%;" data-type="{{selectType}}" bindtap="multiFinish">
<text class="borderSpan">完成</text>
</view>
<view class="refuseBtn" style="width:20%;color:#fe4800" bindtap="refuseMultiClick">
<text class="borderSpan">已选{{hasSelectPerson[selectType]}}人</text>
</view>
<view class="refuseBtn" style="width:20%;" data-type="3" bindtap="refuseAndAdoptMultiClick">
<text class="borderSpan">取消录用</text>
</view>
<view class="employBtn" style="width:20%;" bindtap="settleSalaryClick">
<text>结算工资</text>
</view>
</view>
</block>
</block>
<block wx:else>
<view class='noneData'>
<view class='iconfont icon-zanwudingdan'></view>
<view>暂无职位</view>
</view>
</block>
</view>
<view class='listbox' wx:if="{{selectType==2}}">
<block wx:if="{{orderJoinListData[selectType].length != 0}}">
<view class='listItem' wx:for="{{orderJoinListData[selectType]}}" wx:key="index">
<view class='itemDetail'>
<view>
<image src='{{item.splicingAvatar}}' style='width:90rpx;height:90rpx;border-radius:5px;'></image>
</view>
<view class='boxRight'>
<view class='boxName'>{{item.user_nickname}}</view>
<view class='sexAndage'>
<text wx:if="{{item.sex == 1}}">男</text>
<text wx:else>女</text>
<text class='columnLine'></text>
<text>{{item.birthday}}岁</text>
</view>
</view>
</view>
<!-- // 订单状态：0待录用 2未录用3待结算4已完成5雇主已评价6雇工已评价7双方已评价 -->
<view class='btnBox'>
<view wx:if="{{item.type==2}}" class='onUse' data-user_nickname='{{item.user_nickname}}' data-user_id='{{item.user_id}}' bindtap="evaluateClick">
<button>去评价</button>
</view>
</view>
</view>
</block>
<block wx:else>
<view class='noneData'>
<view class='iconfont icon-zanwudingdan'></view>
<view>暂无职位</view>
</view>
</block>
</view>
<view class='listbox' wx:if="{{selectType==3}}">
<block wx:if="{{orderJoinListData[selectType].length != 0}}">
<view class='listItem' wx:for="{{orderJoinListData[selectType]}}" wx:key="index">
<view class='itemDetail'>
<block wx:if="{{mutiWordShow[selectType]}}">
<view class="choice">
<text wx:if="{{item.select}}" data-id="{{item.user_id}}" data-index="{{index}}" class="iconfont icon-xuanzhong" bindtap="circleClick"></text>
<text wx:else data-id="{{item.user_id}}" data-index="{{index}}" class="iconfont noChoice" bindtap="circleClick"></text>
</view>
</block>
<view>
<image src='{{item.splicingAvatar}}' style='width:90rpx;height:90rpx;border-radius:5px;'></image>
</view>
<view class='boxRight'>
<view class='boxName'>{{item.user_nickname}}</view>
<view class='sexAndage'>
<text wx:if="{{item.sex == 1}}">男</text>
<text wx:else>女</text>
<text class='columnLine'></text>
<text>{{item.birthday}}岁</text>
</view>
</view>
</view>
<view class='btnBox'>
<view class='onUse' data-id="{{item.user_id}}" bindtap="refreshClick">
<button>重新录用</button>
</view>
</view>
</view>
<block wx:if="{{!mutiWordShow[selectType]}}">
<view class="batchBtn" data-type="{{selectType}}" bindtap="multiClick">批量</view>
</block>
<block wx:else>
<view class="footer" id="hired" style="display:flex">
<view bindtap="allSelect" style="width:25%;">
<text wx:if="{{allselectValue[selectType]}}" class="iconfontBottom icon-xuanzhong"></text>
<text wx:else class="iconfontBottom noChoice"></text>
<text>全选</text>
</view>
<view class="groupNotice" style="width:25%;" data-type="{{selectType}}" bindtap="multiFinish">
<text class="borderSpan">完成</text>
</view>
<view class="refuseBtn" style="width:25%;color:#fe4800" >
<text class="borderSpan">已选{{hasSelectPerson[selectType]}}人</text>
</view>
<view class="employBtn" style="width:25%;" data-type="2" bindtap="refuseAndAdoptMultiClick">
<text>重新录用</text>
</view>
</view>
</block>
</block>
<block wx:else>
<view class='noneData'>
<view class='iconfont icon-zanwudingdan'></view>
<view>暂无职位</view>
</view>
</block>
</view>
wxss文件
/* pages/layer/enroll_management/enroll_management.wxss */
page{
background: #f7f7f7;
}
.tabContainter {
position: relative;
top: 0;
width: 100%;
display: flex;
height: 80rpx;
align-items: center;
/* border-bottom: 1px solid #eaebeb; */
background: #fff;
z-index: 66;
}
.listItem{
background: #fff;
}
.tabContainter::after {
content: '';
height: 1px;
width: 100%;
background: #ddd;
position: absolute;
bottom: 0;
left: 0;
transform: scaleY(0.3);
}
.choiceModule {
width: 50%;
height: 80rpx;
line-height: 75rpx;
text-align: center;
font-size: 28rpx;
position: relative;
}
.ifChoice {
font-weight: bold;
}
.ifChoice .orActiveBg {
width: 44rpx;
height: 8rpx;
background: #ff9829;
border-radius: 10rpx;
margin: 0 auto;
position: absolute;
z-index: 100;
left: 0;
right: 0;
}
.listItem {
border-bottom: 16rpx solid #f7f7f7;
}
.itemDetail{
display: flex;
padding: 24rpx;
}
.detailBox {
margin: 20rpx 0;
display: flex;
}
.boxRight {
margin-left: 20rpx;
}
.boxName {
font-size: 32rpx;
}
.sexAndage {
color: #808080;
margin: 14rpx 0;
font-size: 26rpx;
}
.boxPhone {
display: flex;
color: #ff9829;
font-size: 26rpx;
}
.columnLine {
width: 2rpx;
height: 22rpx;
background: #eaebeb;
display: inline-block;
margin: 0 10rpx;
}
.btnBox {
/* border-top: 2rpx solid #eaebeb; */
/* padding: 24rpx; */
display: flex;
justify-content: flex-end;
position: relative;
}
.btnBox::after {
content: '';
height: 1px;
width: 100%;
background: #ddd;
position: absolute;
top: 0;
left: 0;
transform: scaleY(0.3);
}
.btnBox>view {
border: 1px solid #cacbcc;
height: 64rpx;
line-height: 64rpx;
width: 150rpx;
text-align: center;
margin: 20rpx;
border-radius: 6rpx;
}
.onUse {
color: #ff9829;
border: 1px solid #ff9829 !important;
}
.onUse > button {
color: #ff9829;
padding: 0;
line-height: 60rpx;
background-color: transparent;
border: none;
font-size: 30rpx;
}
.onUse > button:after {
border: none;
}
.onRefuse {
padding: 0;
line-height: 60rpx;
background-color: transparent;
border: none;
font-size: 30rpx;
}
.onRefuse:after {
border: none;
}
.batchBtn {
height: 96rpx;
line-height: 96rpx;
text-align: center;
color: #fff;
background: #ff9829;
position: fixed;
bottom: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
display: flex;
height: 50px;
width: 100%;
border-top: 1px solid #eaebeb;
display: none;
background-color: white;
}
.footer view {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
line-height: 50px;
font-size: 15px;
}
.iconfontBottom {
width: 20px;
height: 20px;
color: #ff9829;
text-align: center;
line-height: 20px;
font-size: 23px;
margin-right: 8px;
}
.noChoice {
border: 1px solid #888;
border-radius: 50%;
box-sizing: border-box;
}
.choice {
display: flex;
align-items: center;
margin-right: 12px;
padding-bottom: 15px;
display: flex;
}
.choice text {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: #ff9829;
font-size: 23px;
}
.footer .iconfont {
width: 20px;
height: 20px;
color: #ff9829;
text-align: center;
line-height: 20px;
font-size: 23px;
margin-right: 8px;
}
.noneData{
margin-top: 80rpx;
text-align:center;
color: #808080;
}
.noneData .icon-zanwudingdan{
font-size:160rpx;
padding-top:40%;
}
JS文件
// pages/layer/enroll_management/enroll_management.js
var common = require("../../../public.js");
var HttpUrl = common.HttpUrl
var ImgUrl = common.ImgUrl
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
ImgUrl:ImgUrl,
orderType:1,// 订单类型 1:普通单 2派单
order_id: 0,// 订单id
selectType: 0,// 标签类型
loaded: [false,false, false, false],// 标签加载情况
orderJoinListData: [[], [], [], []],// 所有数据源
mutiWordShow: [false, false, false, false],// 批量文字显示情况
allselectValue: [false,false, "++", false],
hasSelectPerson: [0, 0, 0, 0],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.hideShareMenu();
for (var i = 0; i < this.data.loaded.length; i++) {
if (i == options.type) {
this.data.loaded[i] = true;
this.setData({
orderType: options.orderType,
order_id: options.id,
selectType: options.type,// 当前选择类型
loaded: this.data.loaded,
});
}
}
console.log("加载情况" + JSON.stringify(this.data.loaded));
// 0：待录用。1：待结算。2：已完成。3：未录用
this.orderJoinList(options.type);
},
// 报名管理指定类型数据获取
orderJoinList: function (currentType) {
var that = this;
var jsonData = {
type: currentType, // 0：待录用。1：待结算。2：已完成。3：未录用
order_id: that.data.order_id
};
console.log("json数据为" + JSON.stringify(jsonData));
common.wxRequest("process/order_join_list", "post", jsonData, function () { }, function (e) {
console.log("order_join_list数据为" + JSON.stringify(e));
if (e.code == 1) {
if (e.data.length != 0) {
for (var i = 0; i < e.data.length; i++) {
e.data[i].splicingAvatar = ImgUrl + e.data[i].avatar;
e.data[i].select = false;
}
that.data.orderJoinListData[currentType] = e.data;
that.setData({
selectType: currentType,
orderJoinListData: that.data.orderJoinListData,
});
console.log("全部数据为" + JSON.stringify(that.data.orderJoinListData));
} else {
that.data.orderJoinListData[currentType] = [];// 清空指定标签下的数据。
that.setData({
selectType: currentType,
orderJoinListData: that.data.orderJoinListData,
});
}
} else {
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 下拉刷新清空当前选中的所有人
this.data.hasSelectPerson[this.data.selectType] = 0;
this.data.allselectValue[this.data.selectType] = false;
this.setData({
hasSelectPerson: this.data.hasSelectPerson,
allselectValue: this.data.allselectValue,
})
wx.stopPullDownRefresh();
this.orderJoinList(this.data.selectType);
},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
console.log("数组内容为" + JSON.stringify(that.data.loaded) + "当前点击标签" + e.target.dataset.current + "之前存储的标签为" + that.data.selectType);
if (that.data.loaded[e.target.dataset.current]) {// 加载过
that.setData({
selectType: e.target.dataset.current,
});
} else {
that.data.loaded[e.target.dataset.current] = true;
if (this.data.selectType == e.target.dataset.current) {
console.log("return掉了");
return false;
} else {
console.log("走到这里了");
that.setData({
selectType: that.data.selectType,
});
// 0：待录用。1：待结算。2：已完成。3：未录用
if (e.target.dataset.current == 0) {
console.log("待录用");
} else if (e.target.dataset.current == 1) {
console.log("待结算");
} else if (e.target.dataset.current == 2) {
console.log("已完成");
} else {
console.log("未录用");
}
this.orderJoinList(e.target.dataset.current);
}
}
},
multiClick: function (e) {
var type = e.currentTarget.dataset.type;
console.log("类型为" + type);
this.data.mutiWordShow[type] = !this.data.mutiWordShow[type];
this.setData({
mutiWordShow: this.data.mutiWordShow
})
},
// 批量点击完成
multiFinish: function (e) {
var type = e.currentTarget.dataset.type;
console.log("类型为" + type);
this.data.mutiWordShow[type] = false;
this.setData({
mutiWordShow: this.data.mutiWordShow
})
},
// 预约面试 全选
allSelect: function () {
console.log("值为" + this.data.allselectValue[this.data.selectType]);
if (this.data.allselectValue[this.data.selectType]) {
for (var i = 0; i < this.data.orderJoinListData[this.data.selectType].length; i++) {
this.data.orderJoinListData[this.data.selectType][i].select = false;
}
this.data.hasSelectPerson[this.data.selectType] = 0;
} else {
for (var i = 0; i < this.data.orderJoinListData[this.data.selectType].length; i++) {
this.data.orderJoinListData[this.data.selectType][i].select = true;
}
this.data.hasSelectPerson[this.data.selectType] = this.data.orderJoinListData[this.data.selectType].length;
}
this.data.allselectValue[this.data.selectType] = !this.data.allselectValue[this.data.selectType];
// 全局刷新
this.setData({
orderJoinListData: this.data.orderJoinListData,
allselectValue: this.data.allselectValue,
hasSelectPerson: this.data.hasSelectPerson,
});
},
// 每个用户对应的圆点击
circleClick: function (e) {
var user_id = e.currentTarget.dataset.id;
var index = e.currentTarget.dataset.index;
console.log("用户id为" + user_id + "全部数据为" + JSON.stringify(this.data.orderJoinListData[this.data.selectType]) + "index为" + index);
var hasSelectCount = 0;// 单个选择影响全选是否选中
for (var i = 0; i < this.data.orderJoinListData[this.data.selectType].length; i++) {
if (this.data.orderJoinListData[this.data.selectType][i].user_id == user_id) {
this.data.orderJoinListData[this.data.selectType][i].select = !this.data.orderJoinListData[this.data.selectType][i].select;
// 统计底部已选人数(未录用标签会用到)
if (this.data.orderJoinListData[this.data.selectType][i].select == true) {
console.log("执行了++");
this.data.hasSelectPerson[this.data.selectType]++;
} else if (this.data.orderJoinListData[this.data.selectType][i].select == false) {
console.log("执行了--");
this.data.hasSelectPerson[this.data.selectType]--;
}
}
// 和上面if统计有问题？
if (this.data.orderJoinListData[this.data.selectType][i].select == true) {
hasSelectCount++;
}
}
console.log("已选人数统计" + this.data.hasSelectPerson);
if (hasSelectCount == this.data.orderJoinListData[this.data.selectType].length) {
this.data.allselectValue[this.data.selectType] = true;
console.log("全选了");
} else {
this.data.allselectValue[this.data.selectType] = false;
}
// 全局刷新
// this.setData({
// orderJoinListData: this.data.orderJoinListData,
// allselectValue: this.data.allselectValue,
// hasSelectPerson: this.data.hasSelectPerson,
// });
// 局部刷新
var selectStatusChanged = "orderJoinListData[" + this.data.selectType + "][" + index + "].select";
this.setData({
// "orderJoinListData[1][1].select":true,// 选中指定的人。选中待结算类目下的第2个标签。
[selectStatusChanged]: this.data.orderJoinListData[this.data.selectType][index].select,// 动态选中/取消选中标签
allselectValue: this.data.allselectValue,
hasSelectPerson: this.data.hasSelectPerson,
})
console.log("最终数据为" + JSON.stringify(this.data.orderJoinListData[this.data.selectType]));
},
// 拒绝单个
refuseClick: function (e) {
console.log("用户id为" + e.currentTarget.dataset.id);
var that = this;
var jsonData = {
user: e.currentTarget.dataset.id,
type: 4,
order_id: that.data.order_id,
reason: "放鸽子"
};
console.log("json数据为" + JSON.stringify(jsonData));
// return;
common.wxRequest("process/set_order_stage", "post", jsonData, function () { }, function (resp) {
console.log("数据为" + JSON.stringify(resp));
that.orderJoinList(that.data.selectType);
// 及时更新已经加载过的页面。因为录用后这行数据会跑到未录用栏目中，所以要重刷未录用栏目。
that.data.loaded[3] = false;
})
},
// 采纳
adoptClick: function (e) {
console.log("用户id为" + e.currentTarget.dataset.id);
var that = this;
var jsonData = {
user: e.currentTarget.dataset.id,
type: 1,
order_id: that.data.order_id,
};
console.log("json数据为" + JSON.stringify(jsonData));
common.wxRequest("process/set_order_stage", "post", jsonData, function () { }, function (resp) {
console.log("数据为" + JSON.stringify(resp));
that.orderJoinList(that.data.selectType);
// 及时更新已经加载过的页面。因为录用后这行数据会跑到待结算栏目中，所以要重刷待结算栏目。
that.data.loaded[1] = false;
})
},
// 拒绝/录用/取消录用 多个(底部按钮)
refuseAndAdoptMultiClick: function (e) {
var operateType = e.currentTarget.dataset.type;
console.log("选择类型为" + operateType);
var hasSelectRefuseAndAdoptArray = [];
for (var i = 0; i < this.data.orderJoinListData[this.data.selectType].length; i++) {
if (this.data.orderJoinListData[this.data.selectType][i].select == true) {
hasSelectRefuseAndAdoptArray.push(this.data.orderJoinListData[this.data.selectType][i].user_id);
}
}
if (hasSelectRefuseAndAdoptArray.length == 0) {
wx.showToast({
title: '最少选择一个人',
icon: 'none',
duration: 2000
})
return;
}
var userIds = hasSelectRefuseAndAdoptArray.join(',');
console.log("userIds为" + userIds);
this.setOrderStage(userIds, operateType);
},
/**
* process/set_order_stage
* 雇主操作订单状态
* 参数：order_id 订单id user 用户id 逗号隔开 type 1 录用 2重新录用 3取消录用 4拒绝
*/
setOrderStage: function (userIds, operateType) {
var that = this;
var jsonData = {};
if (operateType == 4){
jsonData = {
user: userIds,
type: operateType,
order_id: that.data.order_id,
reason: "放鸽子"
};
}else{
jsonData = {
user: userIds,
type: operateType,
order_id: that.data.order_id,
};
}
console.log("json数据为" + JSON.stringify(jsonData));
// return;
common.wxRequest("process/set_order_stage", "post", jsonData, function () { }, function (resp) {
console.log("数据为" + JSON.stringify(resp));
that.orderJoinList(that.data.selectType);
// 及时更新已经加载过的页面
that.data.loaded[3] = false;
if (that.data.selectType == 3){// 未录用-重新录用点击
// 及时更新已经加载过的页面
that.data.loaded[1] = false;
}
})
},
// 结算多个薪资
settleSalaryClick:function(){
var payArray = [];
// var settleSalaryArray = [];
for (var i = 0; i < this.data.orderJoinListData[this.data.selectType].length; i++) {
if (this.data.orderJoinListData[this.data.selectType][i].select == true) {
// settleSalaryArray.push(this.data.orderJoinListData[this.data.selectType][i].user_id);
var payJson = {};
payJson.order_id = this.data.order_id;
payJson.name = this.data.orderJoinListData[this.data.selectType][i].user_nickname;
payJson.user_id = this.data.orderJoinListData[this.data.selectType][i].user_id;
payJson.avatar = this.data.orderJoinListData[this.data.selectType][i].avatar;
payJson.postType = this.data.orderType;
payArray.push(payJson);
}
}
if (payArray.length == 0) {
wx.showToast({
title: '最少选择一个人',
icon: 'none',
duration: 2000
})
return;
}
wx.navigateTo({
url: '../pay/pay?json=' + JSON.stringify(payArray)
// url: '../pay/pay?order_id=' + order_id + '&name=' + name + '&user_id=' + user_id + '&avatar=' + avatar + '&postType=' + postType
})
},
// 结算单个工资
settleOneSalaryClick: function (options){
// console.log(options.target.dataset)
var order_id = this.data.order_id;
var name = options.target.dataset.name;
var user_id = options.target.dataset.user_id;
var avatar = options.target.dataset.avatar;
var postType = this.data.orderType; // 1:普通订单，2:派单，3：人人猎
console.log("order_id" + order_id + "name" + name + "user_id" + user_id + "avatar" + avatar + "postType" + postType );
var payJson = {};
var payArray = [];
payJson.order_id = order_id;
payJson.name = name;
payJson.user_id = user_id;
payJson.avatar = avatar;
payJson.postType = postType;
payArray.push(payJson);
wx.navigateTo({
url: '../pay/pay?json=' + JSON.stringify(payArray)
// url: '../pay/pay?order_id=' + order_id + '&name=' + name + '&user_id=' + user_id + '&avatar=' + avatar + '&postType=' + postType
})
},
refreshPage:function(){
console.log("刷新界面拉");
// 及时更新已经加载过的页面
this.data.loaded[1] = false;
this.data.mutiWordShow[1] = false;
this.data.hasSelectPerson[1] = 0;
this.data.loaded[2] = false;
this.data.mutiWordShow[2] = false;
this.setData({
loaded: this.data.loaded,
mutiWordShow: this.data.mutiWordShow,
hasSelectPerson:this.data.hasSelectPerson,
selectType: 2,
});
// 0：待录用。1：待结算。2：已完成。3：未录用
this.orderJoinList(2);
},
// 取消录用
refuseAdoptClick:function(e){
var user_id = e.currentTarget.dataset.id;
console.log("用户id为" + user_id);
this.setOrderStage(user_id, 3);
},
// 点击头像查看简历
bindResume: function (e) {
wx.navigateTo({
url: '../../resume_detail/resume_detail?userid=' + e.currentTarget.dataset.userid
})
},
// 重新录用
refreshClick: function (e) {
var user_id = e.currentTarget.dataset.id;
console.log("用户id为" + user_id);
this.setOrderStage(user_id, 2);
},
evaluateClick: function (options){
var user_id = options.currentTarget.dataset.user_id
var user_nickname = options.currentTarget.dataset.user_nickname
wx.navigateTo({
url: '../../evaluate/evaluate?user_id=' + user_id + '&user_nickname=' + user_nickname + '&id=' + this.data.order_id
})
}
})
效果截图
image.png
动画效果
101.1755232.gif
