//列表页
<template>
<view class="list">
<TabBar></TabBar>
<view class="list-top">
<u-input
placeholder="关键字搜索"
prefixIcon="search"
v-model="queryList.keywords"
@change="change"
prefixIconStyle="font-size: 22px;color: #909399"
></u-input>
<view class="tab-th">
<text class="dressingTime" @click="startTimeShow = true">{{time}}</text>
<text class="dressingStatusInfo" @click="statusShow=true">{{statusInfo}}</text>
<view class="icon">
<text class="checkmark-circle" @click="pass('通过')"></text>
<text
class="close-circle"
@click="pass('拒绝')"
></text>
<text
class="share-square"
@click="isExportShow = true"
></text>
</view>
</view>
</view>
<view class="list-content">
<view class="table" v-for="(item,index) in list" :key="index">
<view class="table-checkbox">
<u-checkbox-group v-model="item.value" >
<u-checkbox @change="checkboxChange(item)" shape="circle"></u-checkbox>
</u-checkbox-group>
</view>
<view class="table-item">
<view class="table-item-top">
<view class="table-name"> {{item.visitorName}} </view>
<view class="table-number">{{item.staffCode}} </view>
</view>
<view class="table-item-buttom">
<view class="table-time"> {{item.inTime}} </view>
</view>
</view>
<view :class="item.color"> {{item.status }} </view>
<view class="table-icon">
<view class="icon-info" @click="eyeLoock(item.applyNo)"></view>
</view>
</view>
</view>
<u-popup :show="isExportShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" >
<view class="popup">
<view class="popup-title">
确认将{{checkExport}}访客表单导出吗？
</view>
<view class="popup-buttom">
<view class="popup-jujue popup-jujue-fanhui" @click="isExportShow = false">
取消
</view>
<view class="popup-yunxu popup-jujue-queren" @click="exportQr">
确认
</view>
</view>
</view>
</u-popup>
<u-popup :show="ispassShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" >
<view class="popup">
<view class="popup-title">
确定要将{{text}}的{{leixin}}
</view>
<view class="popup-buttom">
<view class="popup-jujue popup-jujue-fanhui" @click="ispassShow = false">
取消
</view>
<view class="popup-yunxu popup-jujue-queren" @click="possQr">
确认
</view>
</view>
</view>
</u-popup>
<u-datetime-picker :show="startTimeShow" mode="datetime" title="请选择开始时间"
:formatter="formatter" :minDate="lastMonth" @cancel="closeTime" @confirm="confirmTime">
</u-datetime-picker>
<u-datetime-picker :show="endTimeShow" mode="datetime" title="请选择结束时间"
:formatter="formatter" :minDate="Number(new Date())" @cancel="endTimeShow = false" @confirm="confirmEndTime">
</u-datetime-picker>
<u-action-sheet
:show="statusShow"
:actions="statusList"
title="请选择状态"
description="只能单选"
@close="statusShow = false"
@select="statusSelect"
>
</u-action-sheet>
</view>
</template>
<script>
import TabBar from '@/components/tabBar/tabBar.vue'
import {getList} from '@/api/list.js'
import {debounce} from '@/common/utils.js'
import {getLastMonth} from '@/common/formatTime.js'
export default {
components: {
TabBar,
},
data() {
return {
queryList:{
keywords:'' ,
startTime:'',
endTime:'',
status:''
},
list: [],
isExportShow:false,
ispassShow:false,
leixin:'',
text:'已通过',
checkboxList:[],
checkExport:'所有',
startTimeShow:false,
lastMonth: Number(new Date()) - 25920000000,
endTimeShow:false,
TimeNextShow:false,
statusShow:false,
statusList:[{name:'申请已提交',id:'1'},{name:'申请已通过',id:'2'},{name:'申请已失败',id:'3'}],
time:'筛选时间',
isTimeQ:'',
isTimeZ:'',
statusInfo:'筛选状态'
}
},
async onShow() {
let pages = getCurrentPages()
const curPage = pages[pages.length - 1]
this.currentPagePath = curPage.route
uni.setStorageSync('currentPagePath', this.currentPagePath)
this.queryList = {
keywords:'' ,
startTime:'',
endTime:'',
status:''
}
const res = await getList({})
this.list = res.map(item=>{
if(item.visitorApplyStatus == '1'){
item.status = '申请已提交'
item.color = 'blue'
}else if(item.visitorApplyStatus == '2'){
item.status = '申请已通过'
item.color = 'green'
}else {
item.status = '申请未通过'
item.color = 'red'
}
return item
})
},
//下拉刷新
onPullDownRefresh(){
this.queryList = {
keywords:'' ,
startTime:'',
endTime:'',
status:''
}
this.statusInfo = '筛选状态'
this.time ='筛选时间'
this.searchList()
this.checkboxList = []
this.checkExport = '所有'
setTimeout(()=>{
uni.stopPullDownRefresh()
},1000)
},
methods: {
//选中的数据
checkboxChange(item){
if(this.checkboxList.indexOf(item) == -1){
this.checkboxList.push(item)
}else {
this.checkboxList.splice(this.checkboxList.indexOf(item),1)
}
if(this.checkboxList.length > 0){
this.checkExport = '选中的'
}else {
this.checkExport = '所有'
}
},
//搜索框发生改变
async change(e){
if(e.trim() === '') {
const res = await getList({})
return this.list = res.map(item=>{
if(item.visitorApplyStatus == '1'){
item.status = '申请已提交'
item.color = 'blue'
}else if(item.visitorApplyStatus == '2'){
item.status = '申请已通过'
item.color = 'green'
}else {
item.status = '申请未通过'
item.color = 'red'
}
return item
})
}
debounce(this.searchList(),10000)
},
exportClick() {
},
//根据条件搜索
async searchList(){
const res = await getList(this.queryList)
if(res.length == 0){
this.list = []
}else{
this.list = res.map(item=>{
if(item.visitorApplyStatus == '1'){
item.status = '申请已提交'
item.color = 'blue'
}else if(item.visitorApplyStatus == '2'){
item.status = '申请已通过'
item.color = 'green'
}else {
item.status = '申请未通过'
item.color = 'red'
}
return item
})
}
},
//选中状态
statusSelect(e){
this.statusInfo = e.name
this.queryList.status = e.id
this.searchList()
},
//打开导出提示框
pass(leixin){
this.leixin = leixin
this.checkboxList.length !== 0 ? this.text = '选中的' : this.text = '全部'
this.ispassShow = true
},
possQr(){
this.ispassShow = false
},
exportQr(){
this.isExportShow = false
this.exportClick()
},
eyeLoock(messageId){
wx.navigateTo({
url: `/pages/info/info?messageId=${messageId}`,
});
},
//取消选择时间
closeTime() {
this.startTimeShow = false
this.time = '筛选时间'
this.queryList = {
keywords:'' ,
startTime:'',
endTime:'',
status:''
}
},
//确定选择结束时间
async confirmEndTime(e){
this.queryList.endTime = await this.shijianc(e.value)
this.isTimeZ = await this.yueFen(e.value)
this.time = `${this.isTimeQ}${this.isTimeZ}`
this.endTimeShow = false
this.searchList()
},
//确定选择开始时间
async confirmTime(e) {
this.queryList.startTime = await this.shijianc(e.value)
this.isTimeQ = await this.yueFen(e.value)
this.startTimeShow = false
this.endTimeShow = true
},
shijianc(time) {
let date = new Date(time)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
return Y + M + D + h + m + s
},
yueFen(time) {
let date = new Date(time)
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
return M + D
},
//格式化时间
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
},
}
</script>
<style scoped lang="scss">
.list {
box-sizing: border-box;
padding-bottom: 160rpx;
.list-top{
border-radius: 20rpx;
padding: 0 20rpx 5rpx ;
background-color: #fff;
}
.list-content{
border-radius: 20rpx;
margin-top: 20rpx;
padding: 0 20rpx;
background-color: #fff;
}
.tab-th {
margin-top: 16rpx;
margin-bottom: 10rpx;
display: flex;
.dressingTime{
width: 260rpx;
height: 72rpx;
background-color: #F0F0F0;
text-align: center;
line-height: 72rpx;
color: #837d7d;
border-radius: 72rpx;
}
.dressingStatusInfo{
margin-left: 30rpx;
width: 260rpx;
height: 72rpx;
background-color: #F0F0F0;
text-align: center;
line-height: 72rpx;
color: #837d7d;
border-radius: 72rpx;
}
.icon {
margin-left: 30rpx;
width: 210rpx;
display: flex;
justify-content: space-between;
align-items: center;
.close-circle{
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/noNext.png) no-repeat;
background-size: contain;
}
.checkmark-circle{
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/next.png) no-repeat;
background-size: contain;
}
.share-square{
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/export.png) no-repeat;
background-size: contain;
}
}
}
.table {
font-size: 24rpx;
display: flex;
align-items: center;
font-size: 28rpx;
.table-checkbox {
width: 30rpx;
height: 100rpx;
padding: 50rpx 5rpx 3rpx 3rpx;
}
.table-item{
width: 360rpx;
margin-left: 20rpx;
margin-right: 40rpx;
.table-item-top{
display: flex;
justify-content: space-between;
.table-name {
font-size: 34rpx;
font-weight: 500;
}
.table-number {
font-size: 26rpx;
color: #ccc;
}
}
.table-time {
margin-top: 10rpx;
font-size: 26rpx;
color: #ccc;
}
}
.table-icon {
display: flex;
justify-content: center;
align-items: center;
margin-left: 25rpx;
padding-right: 10rpx;
height: 150rpx;
width: 50rpx;
.icon-info{
width: 55rpx;
height: 55rpx;
background: url(@/static/listIcon/overInfo.png) no-repeat;
background-size: 55rpx 55rpx;
}
}
}
}
/deep/.u-input--radius{
background-color: #F0F0F0 !important;
}
.popup {
width: 700rpx;
height: 450rpx;
.popup-title {
text-align: center;
font-size: 36rpx;
margin: 35rpx;
margin-top: 96rpx;
}
.popup-buttom {
padding: 70rpx;
margin-top: 150rpx;
display: flex;
justify-content: space-between;
}
.popup-jujue-fanhui {
border: none;
border-radius: 8rpx;
background-color: gray;
color: #fff;
}
.popup-jujue-queren {
border: none;
border-radius: 8rpx;
background-color: skyblue;
color: #fff;
}
.popup-buttom view {
width: 180rpx;
height: 56rpx;
text-align: center;
line-height: 56rpx;
border-radius: 6rpx;
border: 1px #000 solid;
}
}
.green{
width: 240rpx;
height: 48rpx;
background-color: #00AA88;
text-align: center;
line-height: 48rpx;
border-radius: 48rpx;
color: #fff;
}
.blue{
width: 240rpx;
height: 48rpx;
background-color: #85C2FF;
text-align: center;
line-height: 48rpx;
border-radius: 48rpx;
color: #fff;
}
.red{
width: 240rpx;
height: 48rpx;
background-color: #FA5A5A;
text-align: center;
line-height: 48rpx;
border-radius: 48rpx;
color: #fff;
}
</style>
