hz-zhhq-app/pages/parking/parking.vue

691 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="container">
<view class="banner-box"><image src="/static/imgs/23441.png" mode=""></image></view>
<view class="main">
<view class="tab-box">
<view class="tab-item" >停车信息</view>
<!-- <view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">申请记录</view> -->
</view>
<!-- 预约表单 -->
<view >
<view class="list-box" >
<view class="list-item" v-for="(item, index) in list" :key="index" @click="openButPopup(item)">
<view class="content" style="width: 80%;float: left;">
<view class="info-item">
<view class="fl-text">进入时间:</view>
<view class="fr-text" style="position: relative;">
<view style="width: 10px;height: 10px;border-radius: 100%;background: rgb(0, 194, 119);position: absolute;top: 10upx;left: -32upx;"></view>
{{item.entry_time}}
</view>
</view>
<view class="info-item">
<view class="fl-text" >规定驶出时间:</view>
<view class="fr-text" style="position: relative;">
<view style="width: 10px;height: 10px;border-radius: 100%;background: #ff9000;position: absolute;top: 10upx;left: -32upx;"></view>
{{item.leave_time_set}}</view>
</view>
<view class="info-item" v-if="item.status!='已完成'">
<view class="fl-text" >剩余时间:</view>
<view class="fr-text" style="position: relative;color: red;">
<icon style="position: absolute;left: -32upx;" type="waiting" size="12" />
{{item.remainingTime}}</view>
</view>
<view class="info-item" v-if="item.status=='已完成'">
<view class="fl-text" >停车时间:</view>
<view class="fr-text" style="position: relative;color:green ;">
<icon style="position: absolute;left: -32upx;" type="waiting" size="12" />
{{item.remainingTime}}</view>
</view>
</view>
<view style="width: 20%;float: right; font-size: 14px; color: #666;line-height: 170upx;text-align: right;padding-right: 10upx;">
<view style="color: green;" v-if="item.status=='已完成'">{{item.status}}</view>
<view v-if="item.status!='已完成'">{{item.status}}</view>
</view>
<view style="clear: both;"></view>
</view>
</view>
</view>
</view>
<content-none v-if=" list.length == 0" :padTop="20"></content-none>
</view>
<uni-popup ref="butPopup" type="center" style="">
<view style="width: 600upx;height: 740upx;background: #f8f8f8;position: relative;border-radius: 10upx;padding: 14upx;">
<view style="font-size: 28upx;border-radius:10upx 10upx 0upx 0upx;border:1px solid #e5e5e5;width:100%;padding: 20upx 0upx;background: white;text-align: center;">
申请延期
</view>
<view style="height: 500upx;border:1px solid #e5e5e5 ;border-top: none;font-weight: 100%;border-radius: 0upx 0upx 10upx 10upx;background: white;">
<view class="form-box-popup">
<view class="visitor">
<view v-if="isInner==1" class="form-item" style="border: none;">
<text class="label">审核人</text>
</view>
<view v-if="isInner==1" class="form-item">
<view class="ipt-box select" style="margin: 0px;">
<xfl-select
:list="finalList"
:clearable="true"
:listShow="showList"
:isCanInput="true"
:focusShowList = "true"
:style_Container="' font-size: 28upx;border-radius:10upx;border:1px solid #e5e5e5;width:100%'"
:placeholder = "'请输入姓名、手机号、部门搜索'"
@change="changeSel"
@input="inputSel"
@clear="clearSel"
:selectHideType="'hideAll'"
>
</xfl-select>
</view>
</view>
<view class="form-item">
<text class="label">延期时长</text>
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<!-- <input type="text" :value="visitEndTime" placeholder="请选择结束时间"> -->
<picker class="picker" @change="bindPickerChange" :value="index" :range="array" >
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
</view>
<view class="form-item" style="border: none;">
<text class="label">申请理由</text>
<view class="ipt-box">
<textarea @blur="bindTextAreaBlur" placeholder="请输入申请理由" :value="reason"/>
</view>
</view>
</view>
</view>
</view>
<view class="footer-btn footer-btn-two" style="position: absolute;margin-bottom: 20upx;">
<view class="btn btn-col" style="width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;" @click="closeButPopup()">取消</view>
<view class="btn btn-col1" style="width:40%;border-radius: 10upx" @click="saveDelayParkInfo()">确定</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { getDate, alertTip, callbackRequest, getStorage, regPhone, formatDate } from '@/common/util.js';
import {getMyParkInfoList,getCirculationList,saveDelayParkInfo } from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
import UniPopup from "@/components/uni-popup/uni-popup.vue"
import xflSelect from '../../components/xfl-select/xfl-select2.vue'
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000;
export default {
data() {
return {
page: 1,
pageSize: 10,
loadingType: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
isInner: getStorage('userInfo').isInner,
userId: getStorage('userInfo').id,
list: [
// {entryTime:"2020-03-05 09:30",departureTime:"2020-03-05 15:30",status:'进行中',remainingTime:'3小时27分'},
// {entryTime:"2020-03-04 09:30",departureTime:"2020-03-04 15:30",status:'已完成',remainingTime:'5小时23分'},
// {entryTime:"2020-03-03 09:30",departureTime:"2020-03-03 15:30",status:'已完成',remainingTime:'4小时20分'},
// {entryTime:"2020-03-02 09:30",departureTime:"2020-03-02 15:30",status:'已完成',remainingTime:'1小时20分'},
// {entryTime:"2020-03-01 09:30",departureTime:"2020-03-01 15:30",status:'已完成',remainingTime:'3小时27分'},
],
array: ['一小时', '两小时', '三小时', '四小时','五小时','六小时'],
index: 0,
circulationList: [],
finalList: [],
showList:false,
circulationId:"",
parkInfoId:'',
parkInfoItem:{},
reason:"",
approvalId:"",
userLevel: getStorage('userInfo').userLevel,
};
},
components: {
uniIcons,
loadMore,
contentNone,
datetimePicker,
UniPopup,
xflSelect
},
onLoad(option) {
this.getMyParkInfoList();
this.getCirculationList();
},
watch: {
},
methods: {
getCirculationList(){
let params = {
"method": getCirculationList,
"data": {userLevel:this.userLevel,deptName:getStorage("userInfo").deptName}
};
callbackRequest(params)
.then(res =>{
var resList = [];
resList = res.data.returnData;
var list = [];
for(var i=0;i<resList.length;i++){
var listObj = resList[i];
var obj={};
obj.value = listObj.real_name+"/"+listObj.mobile+"/"+listObj.department_name;
obj.id = listObj.id;
list.push(obj);
}
this.circulationList = list;
this.finalList = list;
})
},
getMyParkInfoList(){
this.list = [];
let params = {
method: getMyParkInfoList,
data: { userId: this.userId, pageSize: this.pageSize, page: this.page }
};
// console.log("--", params.data);
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
let result = res.data.returnData;
// console.log("999--",result);
for(var i=0;i<result.length;i++){
if(result[i].leave_time==""||result[i].leave_time==null){
var leave_time_set = result[i].leave_time_set;
leave_time_set = leave_time_set.substring(0,16);
leave_time_set = leave_time_set.replace(/-/g,'/');
var timestamp = new Date(leave_time_set).getTime();
var nowTimeStamp = parseInt(new Date().getTime());
if(timestamp<nowTimeStamp){
result[i].status = "已超时";
result[i].remainingTime ="0天0小时0分钟";
}else{
var remainingTimeStamp = timestamp-nowTimeStamp;
var days=Math.floor(remainingTimeStamp/(24*3600*1000));
//计算出小时数
var leave1=remainingTimeStamp%(24*3600*1000); //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
result[i].remainingTime =days+"天"+hours+"小时"+minutes+"分钟";
if(result[i].leave_time_apply==null||result[i].leave_time_apply==""){
result[i].status = "进行中";
}else{
var current_status = result[i].current_status;
if(current_status.charAt(current_status.length-1)==0){
result[i].status = "待审核";
}else if(current_status.charAt(current_status.length-1)==1){
result[i].status = "已同意";
}else if(current_status.charAt(current_status.length-1)==2){
result[i].status = "已拒绝";
}
}
}
}else{
result[i].status = "已完成";
var entry_time = result[i].entry_time;
var leave_time = result[i].leave_time;
entry_time = entry_time.substring(0,16);
entry_time = entry_time.replace(/-/g,'/');
var entry_timestamp = new Date(entry_time).getTime();
leave_time = leave_time.substring(0,16);
leave_time = leave_time.replace(/-/g,'/');
var leave_timestamp = new Date(leave_time).getTime();
var remainingTimeStamp = leave_timestamp-entry_timestamp;
var days=Math.floor(remainingTimeStamp/(24*3600*1000));
//计算出小时数
var leave1=remainingTimeStamp%(24*3600*1000); //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
result[i].remainingTime =days+"天"+hours+"小时"+minutes+"分钟";
}
}
if (this.page == 1) {
this.list = result;
} else {
if (result.length > 0) {
this.list = [...this.list, ...result];
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
}
});
},
saveDelayParkInfo(){
if(this.isInner==1){
if(this.circulationId==""){
alertTip("请选择审核人");
return;
}
}
if(this.reason==""){
alertTip("请输入申请理由");
return;
}
let params = {
method: saveDelayParkInfo,
data: {id:this.parkInfoId,leaveTimeApply:this.index+1,leaveTimeSet:this.parkInfoItem.leave_time_set,reason:this.reason,approvalId:this.circulationId}
};
callbackRequest(params).then(res => {
const url = '/pages/parking/parking';
alertTip(res.data.returnMsg);
setTimeout(function() {
uni.redirectTo({
url
});
}, 1000);
});
},
inputSel(e){
this.circulationId="";
if(e.detail.value == ""){
this.finalList = this.circulationList;
this.showList = true;
return
}
var finalList = [];
for (var i = 0; i < this.circulationList.length; i++) {
let ite = this.circulationList[i].value;
// 包含某一字符串
if(ite.indexOf(e.detail.value) !== -1){
finalList = finalList.concat(ite);
}
}
this.finalList = finalList;
this.showList = true;
},
changeSel(newVal){
//console.log(newVal);
this.circulationId = newVal.orignItem.id;
//this.uinfo.orgName = newVal.newVal;
},
clearSel(){
this.circulationId="";
this.finalList = this.circulationList;
this.showList = true;
},
bindTextAreaBlur: function (e) {
this.reason = e.detail.value;
},
bindPickerChange: function(e) {
console.log('picker发送选择改变携带值为', e.target.value)
this.index = e.target.value
},
openButPopup(e){
if(e.status!='进行中'){
return;
}
this.parkInfoId = e.parkInfoId;
this.parkInfoItem = e;
this.$refs.butPopup.open()
},
closeButPopup(){
this.$refs.butPopup.close()
},
},
onReachBottom() {
// if (this.loadingType !== 0 || this.currentTabIndex != 1) {
// return;
// }
// this.loadingType = 1;
// this.page = this.page + 1;
// this.getReservationRecord();
}
};
</script>
<style lang="scss">
@import '@/static/css/common.scss';
uni-textarea {
width: 100%;
height: 330upx;
display: block;
position: relative;
font-size: 28upx;
line-height: normal;
top: 8upx;
}
.batchBtn{
position: absolute;height: 140upx; background: white;padding-top: 30upx;
.btn1{
width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
}
.btn2{
width:40%;border-radius: 10upx;
}
.btn3{
width: 28%;margin-left: 4%;border-radius: 10upx;
}
.btn4{
width: 28%;margin-left: 4%;border-radius: 10upx;
}
.btn5{
width: 28%;margin-left: 4%;border-radius: 10upx;
background: #348CF2;
}
}
.container {
position: relative;
overflow: hidden;
background: #f8f8f8;
min-height: 100vh;
.banner-box {
width: 100%;
height: 240upx;
position: absolute;
top: 0;
left: 0;
image {
width: 100%;
height: 100%;
}
}
.main {
margin: 172upx 40upx 0;
position: relative;
z-index: 10;
.tab-box {
overflow: hidden;
border-radius: 10upx 10upx 0 0;
background: rgba(132, 149, 167, 0.8);
height: 70upx;
.tab-item {
float: left;
height: 70upx;
width: 100%;
font-size: 30upx;
color: #e5f6ff;
text-align: center;
line-height: 70upx;
}
.active {
background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
}
.form-box {
padding: 20upx 30upx 0upx;
margin-bottom: 20upx;
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx 0;
.label {
float: left;
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
.pic {
width: 60upx;
height: 60upx;
line-height: 80upx;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
input {
width: 70%;
}
}
.jian {
width: 50upx;
height: 50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.sure-btn {
width: 100%;
height: 80upx;
font-size: 28upx;
color: #fff;
text-align: center;
line-height: 80upx;
border-radius: 8upx;
background: #0066cc;
background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
margin-top: 50upx;
}
}
.list-box {
.list-item {
background: #fff;
margin-bottom: 10upx;
.title {
border-bottom: 1px solid #eee;
padding: 20upx 10upx;
overflow: hidden;
line-height: 40upx;
.line {
display: inline-block;
width: 10upx;
height: 32upx;
background: $assistColor;
margin-top: 4upx;
}
.text {
display: inline-block;
font-size: 28upx;
color: #444;
font-weight: bold;
margin-left: 10upx;
vertical-align: top;
}
.status {
font-size: 26upx;
color: $assistColor;
float: right;
}
.status1 {
font-size: 26upx;
color: #00c277;
float: right;
}
.status2 {
font-size: 26upx;
color: red;
float: right;
}
}
.content {
padding: 10upx 20upx;
// padding:10upx 10upx 60upx 10upx;
.info-item {
overflow: hidden;
padding-bottom: 10upx;
.fl-text {
width:220upx;
float: left;
font-size: 26upx;
color: #444;
font-weight: bold;
line-height: 40upx;
}
.fr-text {
float: left;
font-size: 26upx;
color: #666;
line-height: 40upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
}
}
}
#addbtn {
height: 120upx;
background-color: #ffffff;
padding: 30upx;
border-radius: 30upx;
color: #333333;
border-bottom: 0.033333rem solid #eee;
align-items: center;
position: relative;
margin-top: 20upx;
}
.addbtn view text:nth-child(1) {
font-size: 32upx;
margin-left: 220upx;
color: #00c277;
}
.addbtn view text:nth-child(2) {
font-size: 32upx;
margin-left: 180upx;
color: #00c277;
}
.tips {
font-size: 22upx;
// margin-left: 80upx;
margin-top: 20upx;
}
uni-radio .uni-radio-input {
-webkit-appearance: none;
appearance: none;
margin-right: 5px;
outline: 0;
border: 1px solid #d1d1d1;
background-color: #fff;
border-radius: 50%;
width: 18px!important;
height: 18px!important;
position: relative;
}
.form-box-popup {
padding-left:20upx ;
padding-right:20upx ;
margin-bottom: 20upx;
.form-item {
border-bottom: 1px solid #eee;
padding: 30upx 0;
.label {
float: left;
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
.pic {
width: 60upx;
height: 60upx;
line-height: 80upx;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
input {
width: 70%;
}
}
.jian {
width: 50upx;
height: 50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.sure-btn {
width: 100%;
height: 80upx;
font-size: 28upx;
color: #fff;
text-align: center;
line-height: 80upx;
border-radius: 8upx;
background: #0066cc;
background: linear-gradient(to right, #ffc200, #ff9000); /*设置按钮为渐变颜色*/
margin-top: 50upx;
}
}
</style>