304 lines
7.2 KiB
Vue
304 lines
7.2 KiB
Vue
<template>
|
|
|
|
<!-- pages/index/index.wxml -->
|
|
<view :style="{height: 'calc( ' + getHeight() + 'px - 30rpx)' }" class="container-details" >
|
|
|
|
<view class="search-container">
|
|
<view class="search">
|
|
<!-- <uni-icons class="icon" type="search" size="30" @click="search"></uni-icons>-->
|
|
|
|
<img class="icon" src="http://8.155.21.176:9000/yonggong/images/sign/fdj.png"/>
|
|
|
|
<input class="search-input" id="search-input" v-model="searchVal" type="text" placeholder="请输入姓名或手机号查询" maxlength="30" @confirm="search"/>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
<view class="list-container">
|
|
<view class="list">
|
|
<view v-for="(item, index) in showSign" :key="index" class="item" :class="'item-check' + item.status" @click="select(item)">
|
|
<view class="headImg">
|
|
{{item.employeeName}}
|
|
</view>
|
|
<view class="phone">
|
|
{{item.phone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<view class="fd-bottom">
|
|
<view class="all-select" @click="addEmployeeAndBaoming">添加员工并报名</view>
|
|
<view class="all-pay" @click="baoming">报名</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { searchUser } from "@/api/system/user";
|
|
import { baomingBatch,getTask } from "@/api/task";
|
|
export default {
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
id: null,
|
|
},
|
|
task: {},
|
|
title: "任务名称",
|
|
signInfo: {},
|
|
searchVal: "",
|
|
showSign: [],
|
|
selectItems: {},//key为uid value = user对象
|
|
};
|
|
},
|
|
|
|
onLoad: function(options) {
|
|
this.queryParams.id = options.id;
|
|
this.search();
|
|
},
|
|
onUnload: function() {
|
|
// console.log('关闭页面');
|
|
var pages = getCurrentPages();
|
|
// console.log(pages.length);
|
|
var Page = pages[pages.length-1];//当前页
|
|
// console.log(pages[pages.length-1].route);//输出当前路由
|
|
var prevPage = pages[pages.length-2];
|
|
// console.log(pages[pages.length-2].route);//输出上一个页面的路由
|
|
if(pages[pages.length-2].route == 'pages/index'){ //确定要返回到相应页面，在触发
|
|
prevPage.$vm.reload()
|
|
}
|
|
},
|
|
methods:{
|
|
select(item) {
|
|
if (item.status == 2){
|
|
item.status = 1;
|
|
this.selectItems[item["employeeId"]] = item;
|
|
}else if (item.status == 1){
|
|
item.status = 2;
|
|
delete this.selectItems[item["employeeId"]];
|
|
}
|
|
},
|
|
search(){
|
|
var that = this;
|
|
searchUser(this.searchVal, this.queryParams.id).then(response => {
|
|
that.showSign = Object.values(that.selectItems);
|
|
that.showSign = that.showSign.reverse();
|
|
for (let i = 0; i < response.rows.length; i++) {
|
|
if(that.selectItems[response.rows[i].employeeId] == null){
|
|
that.showSign.push(response.rows[i]);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
baoming(){
|
|
baomingBatch({"list": Object.values(this.selectItems), "taskId": this.queryParams.id}).then(response => {
|
|
// console.log("123" + response)
|
|
this.$modal.msgSuccess("报名成功");
|
|
this.selectItems = {};
|
|
this.search();
|
|
// uni.navigateTo({
|
|
// url: "index"
|
|
// })
|
|
|
|
// this.$tab.reLaunch('/pages/index')
|
|
})
|
|
},
|
|
addEmployeeAndBaoming(){
|
|
uni.navigateTo({
|
|
url: "addEmployeeAndBaoming?id="+this.queryParams.id
|
|
})
|
|
},
|
|
getHeight(){
|
|
// const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度
|
|
return uni.getSystemInfoSync().windowHeight; // 获取页面高度
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
page{
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
html, body {
|
|
background-color: #ffffff;
|
|
//height: 100%;
|
|
height: calc(100% - 1rpx);
|
|
}
|
|
.container-details{
|
|
height: calc(100% - 1rpx);
|
|
}
|
|
|
|
.search-container{
|
|
margin-top: 10rpx;
|
|
margin-bo: 10rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.search{
|
|
width: 100%;
|
|
height: 80rpx;
|
|
border-radius: 450px;
|
|
border: 1px solid #6c6c6c;
|
|
display: flex;
|
|
align-items: center;
|
|
/*justify-content: center;*/
|
|
.icon{
|
|
margin-left: 20rpx;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.search-input{
|
|
width: 82%;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
.list-container{
|
|
height: calc(100% - 270rpx);
|
|
overflow-y: auto;
|
|
margin-top: 30rpx;
|
|
.list{
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr); /* 创建3个等宽的列 */
|
|
list-style-type: none;
|
|
/*padding: 0rpx 10rpx 10rpx 10rpx;*/
|
|
|
|
place-items: center;
|
|
|
|
|
|
|
|
.item-check1{
|
|
background-size: 100% 100%;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/sign.png");
|
|
.phone{
|
|
color: #5e5e5e;
|
|
}
|
|
}
|
|
.item-check0{
|
|
background-size: 100% 100%;
|
|
//background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noSign1.png");
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/sign.png");
|
|
color: #d6d6d6;
|
|
.phone{
|
|
color: #d6d6d6;
|
|
}
|
|
}
|
|
.item-check2{
|
|
background-size: 100% 100%;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noneSign.png");
|
|
.phone{
|
|
color: #5e5e5e;
|
|
}
|
|
}
|
|
.item{
|
|
position: relative;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin: 0rpx 0 13rpx 0 ;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 25rpx 10rpx 25rpx 10rpx;
|
|
border-radius: 10rpx;
|
|
|
|
.status{
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
}
|
|
.headImg{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
font-weight: 650;
|
|
font-size: 28rpx;
|
|
}
|
|
.phone{
|
|
font-size: 20rpx;
|
|
}
|
|
.remark{
|
|
color: #adadad;
|
|
background-color: #e3e3e3;
|
|
width: 90%;
|
|
display: grid;
|
|
text-align: center;
|
|
place-items: center;
|
|
font-size: 20rpx;
|
|
height: 30rpx;
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
overflow: hidden; /* 隐藏超出div的内容 */
|
|
text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fd-bottom{
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 180rpx;
|
|
position: absolute;
|
|
/*bottom: env(safe-area-inset-bottom);*/
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
padding: 0rpx 50rpx 0rpx 50rpx;
|
|
.all-select{
|
|
width: 50%;
|
|
color: #107ff6;
|
|
font-weight: 650;
|
|
font-size: 30rpx;
|
|
margin-left: 8rpx;
|
|
border-radius: 10rpx;
|
|
width: 300rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1rpx solid #107ff6;
|
|
}
|
|
.all-pay{
|
|
width: 50%;
|
|
background-color: #107ff6;
|
|
color: #ffffff;
|
|
font-weight: 650;
|
|
font-size: 30rpx;
|
|
margin-left: 8rpx;
|
|
border-radius: 10rpx;
|
|
width: 300rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: auto; /* 推动元素到右边 */
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|