437 lines
13 KiB
Vue
437 lines
13 KiB
Vue
<template>
|
|
|
|
<!-- pages/index/index.wxml -->
|
|
<view class="container-details">
|
|
|
|
<view class="head">
|
|
<view class="bm-num">
|
|
<view class="num">
|
|
{{task.baomingNum}}
|
|
</view>
|
|
<view class="num-label">
|
|
报名人数
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right">
|
|
<view class="sign-num">
|
|
<view class="num">
|
|
{{task.signNum}}
|
|
</view>
|
|
<view class="num-label">
|
|
已到人数
|
|
</view>
|
|
</view>
|
|
<view class="no-num">
|
|
<view class="num">
|
|
{{task.noSignNum}}
|
|
</view>
|
|
<view class="num-label">
|
|
未到人数
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="search-container">
|
|
<view class="search">
|
|
<!-- <uni-icons class="icon" type="search" size="30" @click="search"></uni-icons>-->
|
|
|
|
<img class="icon" src="/static/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">
|
|
<view v-for="(item, index) in showSign" :key="index" class="item" :class="'item-check' + item.status" @click="setInfo(item)">
|
|
|
|
<!-- <view class="status">-->
|
|
<!-- <uni-icons v-if="item.status == 1" class="icon" color="#11dc03" type="checkbox-filled" size="20" @click="search"></uni-icons>-->
|
|
<!-- <uni-icons v-if="item.status == 0" class="icon" color="red" type="clear" size="20" @click="search"></uni-icons>-->
|
|
<!-- </view>-->
|
|
<view class="headImg">
|
|
{{item.employeeName}}
|
|
</view>
|
|
<view class="phone">
|
|
{{item.phone}}
|
|
</view>
|
|
<view class="remark">
|
|
{{item.remark == null ? "备注说明文案" : item.remark}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view>
|
|
<!-- 普通弹窗 -->
|
|
<uni-popup ref="popup" background-color="#fff">
|
|
<view class="popup-content dialog" :class="{'popup-height': type === 'left' || type === 'right' }">
|
|
<view class="name">
|
|
{{signInfo.employeeName}}
|
|
</view>
|
|
<view class="phone">
|
|
{{signInfo.phone}}
|
|
</view>
|
|
<view class="remark">
|
|
<textarea placeholder="请输入备注说明" v-model="signInfo.remark" >
|
|
|
|
</textarea>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="yidao" @click="sign(1)">
|
|
<!-- 已到-->
|
|
</view>
|
|
<view class="weidao" @click="sign(0)">
|
|
<!-- 未到-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { getTaskDetails, setSign } from "@/api/task";
|
|
// import { getCodeImg } from '@/api/login'
|
|
export default {
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
id: null,
|
|
},
|
|
task: {},
|
|
title: "任务名称",
|
|
signInfo: {},
|
|
searchVal: "",
|
|
showSign: [],
|
|
};
|
|
},
|
|
onLoad: function(options) {
|
|
this.queryParams.id = options.id;
|
|
this.getInfo();
|
|
},
|
|
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:{
|
|
getInfo() {
|
|
var that = this;
|
|
getTaskDetails(this.queryParams).then(response => {
|
|
console.log(response)
|
|
that.task = response.data;
|
|
that.showSign = that.task.listSign;
|
|
let title = "【"+ that.task.taskName +"】人员详情";
|
|
uni.setNavigationBarTitle({
|
|
title: title
|
|
});
|
|
});
|
|
},
|
|
setInfo(item){
|
|
this.$refs.popup.open('center')
|
|
this.signInfo = item;
|
|
},
|
|
sign(status){
|
|
let oldStatus = this.signInfo.status;
|
|
let change = this.signInfo.status != status;
|
|
this.signInfo.status = status;
|
|
setSign(this.signInfo);
|
|
if (change){
|
|
if (status == 1){
|
|
this.task.signNum ++;
|
|
}else{
|
|
this.task.noSignNum ++;
|
|
}
|
|
if (oldStatus == 0){
|
|
this.task.noSignNum --;
|
|
}else if (oldStatus == 1){
|
|
this.task.signNum --;
|
|
}
|
|
|
|
}
|
|
this.$refs.popup.close()
|
|
},
|
|
search(){
|
|
this.showSign = [];
|
|
for (let i = 0; i < this.task.listSign.length; i++) {
|
|
if (this.task.listSign[i].employeeName.indexOf(this.searchVal) > -1){
|
|
this.showSign.push(this.task.listSign[i]);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
html, body {
|
|
background-color: #ffffff;
|
|
height: 100%;
|
|
}
|
|
.container-details{
|
|
/*background-color: #e3e3e3;*/
|
|
|
|
background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
|
|
/*background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/bg.png');*/
|
|
|
|
/*height: 1100rpx;*/
|
|
min-height: 100%;
|
|
background-size: 100% 100%;
|
|
/*background-size: 100%;*/
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
z-index: 1000;
|
|
padding: 30rpx 30rpx 0 30rpx;
|
|
}
|
|
.head{
|
|
height: 300rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.bm-num{
|
|
background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/bmNum.png');
|
|
background-size: 100% 100%;
|
|
/*width: 40%;*/
|
|
height: 300rpx;
|
|
width: 300rpx;
|
|
padding: 40rpx 0 0 40rpx;
|
|
|
|
.num{
|
|
width: 100%;
|
|
color: #ffffff;
|
|
font-weight: 650;
|
|
font-size: 60rpx;
|
|
}
|
|
.num-label{
|
|
color: #ffffff;
|
|
margin-top: 10rpx;
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
.right{
|
|
/*width: 60%;*/
|
|
margin-left:auto ;
|
|
.sign-num{
|
|
width: 370rpx;
|
|
height: 145rpx;
|
|
background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/ydrs.png');
|
|
background-size: 100% 100%;
|
|
padding: 12rpx 0 0 12rpx;
|
|
.num{
|
|
width: 100%;
|
|
color: #ffffff;
|
|
font-weight: 650;
|
|
font-size: 40rpx;
|
|
}
|
|
.num-label{
|
|
color: #ffffff;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.no-num{
|
|
margin-top: 2rpx;
|
|
width: 370rpx;
|
|
height: 145rpx;
|
|
background-image: url('http://8.155.21.176:9000/yonggong/m-images/sign/wdrs.png');
|
|
background-size: 100% 100%;
|
|
padding: 12rpx 0 0 12rpx;
|
|
.num{
|
|
width: 100%;
|
|
color: #ffffff;
|
|
font-weight: 650;
|
|
font-size: 40rpx;
|
|
}
|
|
.num-label{
|
|
color: #ffffff;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
.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{
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr); /* 创建3个等宽的列 */
|
|
list-style-type: none;
|
|
/*padding: 0rpx 10rpx 10rpx 10rpx;*/
|
|
margin-top: 30rpx;
|
|
place-items: center;
|
|
.item-check1{
|
|
background-size: 100% 100%;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/sign.png");
|
|
}
|
|
.item-check0{
|
|
background-size: 100% 100%;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noSign1.png");
|
|
}
|
|
.item-check-1{
|
|
background-size: 100% 100%;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noneSign.png");
|
|
}
|
|
.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{
|
|
color: #5e5e5e;
|
|
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; /* 显示省略号来代表被截断的内容 */
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.uni-popup__wrapper{
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
width: 90%;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.dialog{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
.name{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 350;
|
|
font-size: 58rpx;
|
|
}
|
|
.phone{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #3e3e3e;
|
|
}
|
|
.remark{
|
|
margin-top: 10rpx;
|
|
width: 92%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #ececec;
|
|
padding: 20rpx;
|
|
textarea{
|
|
width: 100%;
|
|
height: 200rpx;
|
|
}
|
|
}
|
|
.bottom{
|
|
width: 100%;
|
|
height: 150rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.weidao{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 90rpx;
|
|
width: 50%;
|
|
text-align: center;
|
|
margin: 0 50rpx 0 50rpx ;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/noSignBtn.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.yidao{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 90rpx;
|
|
width: 50%;
|
|
margin: 0 50rpx 0 50rpx ;
|
|
background-image: url("http://8.155.21.176:9000/yonggong/m-images/sign/signBtn.png");
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|