<!-- 列表页 -->
<template>
<view class="list">
<!-- <TabBar></TabBar> -->
<view class="list-top">
<u-input
placeholder="关键字搜索"
prefixIcon="search"
border="none"
v-model="queryList.keywords"
@change="change"
prefixIconStyle="font-size: 52rpx;color: #000"
></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 v-if="!isManager" class="template" @click="goSubmitInfo"></text>
<text v-if="isManager" class="checkmark-circle" @click="pass('通过')"></text>
<text v-if="isManager" class="close-circle" @click="pass('拒绝')"></text>
<text v-if="isManager" 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>
<u-checkbox
:checked="item.value"
@change="checkboxChange(item)"
shape="circle"
></u-checkbox>
</u-checkbox-group>
</view>
<view class="table-item" @click="checkboxChange(item)">
<view style="width: 100%;display: flex;justify-content: flex-end;">
<view :class="item.color" style="position: relative;" @click.stop="eyeLoock(item.id, item)">
<text style="margin-right: 10rpx;">{{ item.status }}</text>
<u-icon name="arrow-right" customStyle="position: absolute; right: 6rpx; top: 10rpx; color: #fff"></u-icon>
</view>
</view>
<!-- 眼睛图标、查看 -->
<!-- <view class="table-icon">
<view class="icon-info" @click="eyeLoock(item.id, item)"></view>
</view> -->
<view class="table-item-top">
<view class="table-name"> {{ item.visitorName }} </view>
<!-- <view class="table-number">{{ item.applyNo }} </view> -->
</view>
<view class="table-item-top">
<!-- <view class="table-name"> {{ item.visitorName }} </view> -->
<view class="table-number" style="display: flex;">
<u-icon name="order" customStyle="margin-right: 6rpx;font-size: 40rpx;margin-left: -4rpx;" ></u-icon>
{{ item.applyNo }}
</view>
<view class="table-time" style="display: flex;">
<u-icon name="clock" customStyle="margin-right: 10rpx;" ></u-icon>
<text>{{ item.inTime }} ~ {{ item.showOutTime }}</text>
</view>
</view>
<!-- <view class="table-item-buttom">
<view class="table-time"> {{ item.inTime }} </view>
</view> -->
</view>
</view>
</view>
<u-popup
:show="isExportShow"
mode="bottom"
:round="10"
:closeOnClickOverlay="false"
@close="close">
<view class="popup">
<view class="title">提示</view>
<view class="content">
确认将{{ checkExport }}访客表单导出吗？
</view>
<view class="footer">
<button class="allow refuse" @click="isExportShow = false">取消</button>
<button class="allow" @click="exportQr"> 确认</button>
</view>
</view>
</u-popup>
<u-popup
:show="ispassShow"
mode="bottom"
:round="10"
:closeOnClickOverlay="false"
@close="close">
<view class="popup">
<view class="title">提示</view>
<view class="content"> 确定要将{{ text }}的{{ leixin }}? </view>
<view class="footer">
<button class="allow refuse" @click="ispassShow = false"> 取消</button>
<button class="allow" @click="possQr"> 确认</button>
</view>
</view>
</u-popup>
<u-datetime-picker
:show="startTimeShow"
mode="datetime"
title="请选择开始时间"
v-model="startTimeDefult"
:formatter="formatter"
@cancel="closeTime"
@confirm="confirmTime">
</u-datetime-picker>
<u-datetime-picker
:show="endTimeShow"
mode="datetime"
title="请选择结束时间"
:formatter="formatter"
v-model="endTimeDefult"
@cancel="closeTime"
@confirm="confirmEndTime">
</u-datetime-picker>
<u-action-sheet
:show="statusShow"
:actions="isManager ? statusListManager : statusList"
title="请选择状态"
description="只能单选"
@close="statusShow = false"
@select="statusSelect"
>
</u-action-sheet>
<!-- 获取手机号popup组件 -->
<GetPhonePopup :popShow="popShow" @closePop="closePop"/>
<!-- 分页加载 -->
<LoadingList :loading="loading" :nothingMore="nothingMore" />
<!-- 返回顶部 -->
<u-back-top
:scroll-top="scrollTop"
icon="arrow-up"
duration="200"
></u-back-top>
</view>
</template>
<script>
import TabBar from "@/components/tabBar/tabBar.vue";
import { getList } from "@/api/list.js";
import { debounce, deepCopy, dateToString, getDateTime} from "@/common/utils.js";
import { getLastMonth } from "@/common/formatTime.js";
import { solveStatus } from "@/api/message.js";
import { verifyPhone } from "@/api/index.js";
import { getLogin, getUserProfile } from "@/utils/auth.js";
import GetPhonePopup from "@/components/base/getphonePopup.vue"
import BASE_URL from "@/api/base.js";
import LoadingList from '@/components/base/LoadingList.vue';
import { subscription } from "@/utils/common.js"
export default {
components: {
TabBar, GetPhonePopup, LoadingList
},
data() {
return {
account: '', //员工证件编号---获取列表申请者需要传员工证件编号
checkRadio: null, //单选框选中
isManager: false, //是否是物业管理员
scrollTop: 0,
queryList: {
account: this.account,
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
},
startTimeDefult:Number(new Date()),
endTimeDefult:Number(new Date()),
list: [],
isExportShow: false,
ispassShow: false,
leixin: "",
text: "已通过",
checkboxList: [],
checkExport: "所有",
startTimeShow: false,
endTimeShow: false,
TimeNextShow: false,
statusShow: false,
statusListManager: [
{ name: "申请已提交", id: "1" },
{ name: "申请已通过", id: "2" },
{ name: "申请未通过", id: "3" },
{ name: "全部", id: "0" },
],
statusList: [
{ name: "申请中", id: "1" },
{ name: "申请已通过", id: "2" },
{ name: "申请未通过", id: "3" },
{ name: "全部", id: "0" },
],
time: "筛选时间",
isTimeQ: "",
isTimeZ: "",
statusInfo: "筛选状态",
popShow: false, //控制授权手机号弹出框
offset: 1, //页数
limit: 10, //一页几条数据
nothingMore: false, //上拉加载-没有数据了
loading: false, //是否显示上拉加载-加载中
};
},
mounted() {
uni.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage"]
});
},
//分享好友
onShareAppMessage() {
return {
title: '环市东院区安防小程序',
imageUrl: '../../static/share.jpg',
};
},
// 监听滚动条位置
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
async onShow() {
this.time = "筛选时间";
this.statusInfo = "筛选状态"
this.offset = 1;
let pages = getCurrentPages();
const curPage = pages[pages.length - 1];
this.currentPagePath = curPage.route;
uni.setStorageSync("currentPagePath", this.currentPagePath);
//验证手机号
this.phone = uni.getStorageSync("registerPhone");
await this.checkphone();
this.queryList = {
account: this.account,
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
};
this.nothingMore = false;
const res = await getList(this.queryList);
this.list = res.records.map((item) => {
let tempTime = item.outTime.replace(/-/g,"/")
item.showOutTime = dateToString(new Date(tempTime.slice(tempTime.indexOf("/") + 1)),"HH:mm:ss")
if (item.visitorApplyStatus == "1") {
item.status = this.isManager ? "申请已提交" : '申请中';
item.color = "blue";
} else if (item.visitorApplyStatus == "2") {
item.status = "申请已通过";
item.color = "green";
} else {
item.status = "申请未通过";
item.color = "red";
}
return item;
});
},
//下拉刷新
onPullDownRefresh() {
this.offset = 1;
this.queryList = {
account: this.account,
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
};
this.statusInfo = "筛选状态";
this.time = "筛选时间";
this.searchList(false).then(() => {
uni.stopPullDownRefresh();
});
this.checkboxList = [];
this.checkExport = "所有";
},
//上滑加载
onReachBottom() {
this.getLoadingList();
},
methods: {
//选中的数据
checkboxChange(item) {
this.checkRadio = deepCopy(item)
if(!this.isManager) { //申请者
this.list.forEach(item => {
item.value = false
})
}
item.value = !item.value
if (this.checkboxList.indexOf(item) == -1) {
this.checkboxList.push(item);
} else {
this.checkboxList.splice(this.checkboxList.indexOf(item), 1);
}
this.checkExport = this.checkboxList.length > 0 ? "选中的" : "所有";
},
//搜索框发生改变
async change(e) {
this.offset = 1;
if (e.trim() === "") { //空
this.queryList = {
account: this.account,
keywords: "",
startTime: "",
endTime: "",
status: "",
offset: this.offset,
limit: this.limit
};
const res = await getList(this.queryList);
this.list = res.records.map((item) => {
let tempTime = item.outTime.replace(/-/g,"/")
item.showOutTime = dateToString(new Date(tempTime.slice(tempTime.indexOf("/") + 1)),"HH:mm:ss")
if (item.visitorApplyStatus == "1") {
item.status = this.isManager ? "申请已提交" : '申请中';
item.color = "blue";
} else if (item.visitorApplyStatus == "2") {
item.status = "申请已通过";
item.color = "green";
} else {
item.status = "申请未通过";
item.color = "red";
}
return item;
});
}
debounce(this.searchList(false, true), 10000);
},
//确定导出
async exportClick() {
const sessionId = uni.getStorageSync("sessionId");
let filePath = `${wx.env.USER_DATA_PATH}/${+new Date()}.xlsx`;
let ids = [];
console.log('wqqqq', this.checkboxList)
ids = this.checkboxList.length === 0 ? [] : this.checkboxList.map((item) => item.id);
const params = {
idList: ids,
startTime: this.queryList.startTime,
endTime: this.queryList.endTime,
}
uni.request({
url: 'https://visitor.gd.smartlog.work/visitor/exportMessage',
responseType: "arraybuffer",
method:"POST",
data: params,
//自定义请求头信息
header: { token: sessionId },
success: ({ data }) => {
let fm = wx.getFileSystemManager();
fm.writeFile({
filePath,
data,
success: (res) => {
uni.openDocument({
filePath,
fileType: "xlsx",
showMenu: true,
});
},
});
}
})
this.checkboxList = [];
},
//根据条件搜索
async searchList(is, isFromChange = false) {
if(!this.loading) {
this.list = [];
}
if(!is) {
this.offset = 1
}
this.queryList.offset = this.offset;
this.queryList.account = this.account;
const res = await getList(this.queryList);
if(res.records && res.records.length) {
this.nothingMore = false;
const resData = res.records.map((item, index) => {
let tempTime = item.outTime.replace(/-/g,"/")
item.showOutTime = dateToString(new Date(tempTime.slice(tempTime.indexOf("/") + 1)),"HH:mm:ss")
if (item.visitorApplyStatus == "1") {
item.status = this.isManager ? "申请已提交" : '申请中';
item.color = "blue";
} else if (item.visitorApplyStatus == "2") {
item.status = "申请已通过";
item.color = "green";
} else {
item.status = "申请未通过";
item.color = "red";
}
return item;
});
if(isFromChange) {
this.list = resData
} else {
this.list = this.list.concat(resData);
}
} else {
this.nothingMore = true;
}
},
//选中状态
statusSelect(e) {
this.offset = 1;
this.statusInfo = e.name;
this.queryList.status = e.id;
if(e.id === '0') {
this.queryList.status = ''
}
this.searchList(false);
},
//打开导出提示框
pass(leixin) {
this.leixin = leixin;
this.text = this.checkboxList.length !== 0 ? "选中的" : "所有";
this.ispassShow = true;
},
//点击确认-改变状态
async possQr() {
const statusList = this.checkboxList.length === 0 ? this.list.filter((item) => item.visitorApplyStatus === '1') : this.checkboxList.filter((item) => item.visitorApplyStatus === '1')
let ids = statusList.map((item) => item.id).join();
if( ids === '') {
this.checkboxList = [];
this.ispassShow = false;
this.searchList(false);
return uni.showToast({
title: `访客申请状态仅能修改一次，不能重复修改`,
icon: 'none',
duration: 2000,
})
}
wx.showLoading({
title: '加载中',
mask: true
})
let res = await solveStatus(this.leixin == "通过" ? "2" : "3", ids);
wx.hideLoading()
wx.showToast({
title: `操作成功`,
icon: 'sucess',
duration: 2000,
})
this.searchList(false);
this.ispassShow = false;
this.checkboxList = [];
},
// 点击确认导出
exportQr() {
this.exportClick();
this.isExportShow = false;
},
//点击查看
eyeLoock(messageId, item) {
if(this.isManager) {
wx.navigateTo({
url: `/pages/info/info?messageId=${messageId}`,
});
} else {
wx.navigateTo({
url: '/pagesA/checkListInfo/checkListInfo?form=' + encodeURIComponent(JSON.stringify(item)),
})
}
},
//取消选择时间
closeTime() {
this.offset = 1;
this.startTimeShow = false;
this.time = "筛选时间";
this.queryList = {
keywords: this.queryList.keywords,
startTime: "",
endTime: "",
status: this.queryList.status,
offset: this.offset,
limit: this.limit
};
this.startTimeShow = false;
this.endTimeShow = false;
this.searchList(false)
},
//确定选择结束时间
async confirmEndTime(e) {
this.offset = 1;
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(false);
},
//确定选择开始时间
async confirmTime(e) {
this.offset = 1;
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;
},
//验证手机号-不通过跳转注册页面
async checkphone() {
//有电话就去验证
if (this.phone) {
const res = await verifyPhone(this.phone);
if (res === "用户未注册") {
wx.reLaunch({
url: "/pages/register/register",
});
} else {
uni.setStorageSync("registerPhone", this.phone);
await getUserProfile(); //获取用户信息
const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
if(userInfo.salt === '物业人员' || userInfo.salt === '运维人员') {
this.isManager = true
} else {
this.isManager = false
}
if(this.isManager) { //是物业人员
this.account = '' //物业人员不允许传员工证件编号
} else {
this.account = userInfo.account //员工证件编号
}
}
} else {
//没有电话就弹出授权
this.popShow = true;
}
},
closePop() {
this.popShow = false;
},
//上拉加载
async getLoadingList() {
if (this.nothingMore) return;
this.offset = this.offset + 1;
this.loading = true;
await this.searchList(true);
this.loading = false;
},
//跳转申请者信息提交模板页面
goSubmitInfo() {
if(!this.checkRadio) {
wx.showToast({
title: '请选中',
icon: 'none'
});
return
}
wx.navigateTo({
url: '/pagesA/submitInfo/submitInfo?form=' + encodeURIComponent(JSON.stringify(this.checkRadio)),
})
this.checkRadio = null
subscription()
},
}
}
</script>
<style scoped lang="scss">
.list {
box-sizing: border-box;
padding: 20rpx;
padding-bottom: 180rpx;
.popup {
.title {
font-size: 36rpx;
color: #000;
font-weight: 600;
margin-bottom: 32rpx;
text-align: center;
}
.content {
font-size: 32rpx;
color: #000;
margin-bottom: 42rpx;
text-align: center;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.allow {
color: rgba(197, 0, 10, 1);
height: 68rpx;
padding: 16px 19px;
line-height: 0;
border: 1rpx solid rgba(197, 0, 10, 1);
margin: 0 40rpx;
}
.refuse {
color: rgba(142, 142, 142, 1.0);
border: 1rpx solid rgba(142, 142, 142, 1.0);
background-color: transparent;
}
}
}
.list-top {
border-radius: 20rpx;
padding: 20rpx 20rpx 5rpx;
background-color: #fff;
}
.list-content {
border-radius: 20rpx;
margin-top: 20rpx;
padding: 20rpx;
background-color: #fff;
font-weight: 600;
}
.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: flex-end;
align-items: center;
.close-circle {
width: 55rpx;
height: 55rpx;
background: url('@/static/listIcon/noNext.png') no-repeat;
background-size: contain;
margin-left: 16rpx;
}
.template {
width: 55rpx;
height: 55rpx;
background: url('@/static/listIcon/template.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;
margin-left: 16rpx;
}
}
}
.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: 100%;
margin-left: 20rpx;
margin-right: 40rpx;
border-bottom: 2rpx solid #ccc;
padding: 20rpx 0;
.table-item-top {
display: flex;
flex-direction: column;
.table-name {
font-size: 34rpx;
// font-weight: 500;
margin-top: 10rpx;
}
.table-number {
font-size: 28rpx;
color: #949598;
margin-top: 10rpx;
}
}
.table-time {
font-size: 28rpx;
color: #949598;
}
}
.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__content {
background-color: #f0f0f0;
border-radius: 10rpx;
height: 80rpx;
}
.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>
<style lang="scss">
.list {
.u-popup__content {
padding: 30rpx 40rpx;
// padding-bottom: 0;
}
}
</style>
