hz-zhhq-app/pages/cars-management-sl/cars-management-sl.vue

814 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/ycsq.jpg" mode=""></image></view>
<view class="main">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">未受理</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">用车中</view>
<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">已用车</view>
</view>
<!-- 用车申请 -->
<view class="reservation-box" v-if="currentTabIndex == 0">
<view class="list-box" v-if="commentList.length > 0">
<view class="detail" v-for="(item, index) in commentList" :key="index">
<view class="detail_header">
<text class="blueSign"></text>
<text class="font-tilte">申请用车</text>
<!-- <text class="slect_icon"></text> -->
<text class="font-result" style="color: #666666;">{{ formatDate(item.createTime, 'dateTime') }}</text>
<!-- <text class="font-result" v-if="item.status==1">用车中</text>
<text class="font-result" v-if="item.status==2">已用车</text> -->
</view>
<view class="detail_msg">
<!-- <view class="info-item">
<text>申请人:</text>
<text class="infoSpan">{{ item.userName }}</text>
</view> -->
<!-- <view class="info-item">
<text>申请时间:</text>
<text class="infoSpan">{{ formatDate(item.createTime, 'dateTime') }}</text>
</view> -->
<!-- <view class="info-item">
<text>申请时间:</text>
<text class="infoSpan">{{ formatDate(item.apply_time, 'dateTime') }}</text>
</view> -->
<view class="info-item">
<text>联系人:</text>
<text class="infoSpan">{{ item.userName }}</text>
</view>
<view class="info-item">
<text>联系电话:</text>
<text class="infoSpan">{{ item.telNumber }}</text>
</view>
<view class="info-item">
<text>用车时间:</text>
<text class="infoSpan">{{ item.startTime.replace('/','-').replace('/','-') }}</text>
</view>
<view class="info-item">
<text>乘车人数:</text>
<text class="infoSpan">{{ item.peopleNum}}</text>
</view>
<view class="info-item">
<text>目的地:</text>
<text class="infoSpan">{{ item.destination}}</text>
</view>
<view class="comment-btn" v-if="item.status == 0" @click="acceptUseCarApply(item)">受理</view>
<view class="comment-btn bg-ccc" v-if="item.status != 0">已受理</view>
</view>
</view>
</view>
<content-none v-else :padTop="20"></content-none>
</view>
<!-- 用车中 -->
<view class="reservation-box" v-if="currentTabIndex == 1">
<view class="list-box" v-if="commentList1.length > 0">
<view class="detail" v-for="(item, index) in commentList1" :key="index">
<view class="detail_header">
<text class="blueSign"></text>
<text class="font-tilte">用车中</text>
<!-- <text class="slect_icon"></text> -->
<text class="font-result" style="color: #666666;">{{ formatDate(item.createTime, 'dateTime') }}</text>
</view>
<view class="detail_msg">
<view class="info-item">
<text>联系人:</text>
<text class="infoSpan">{{ item.userName }}</text>
</view>
<view class="info-item">
<text>联系电话:</text>
<text class="infoSpan">{{ item.telNumber }}</text>
</view>
<view class="info-item">
<text>乘车人数:</text>
<text class="infoSpan">{{ item.peopleNum}}</text>
</view>
<view class="info-item">
<text>目的地:</text>
<text class="infoSpan">{{ item.destination}}</text>
</view>
<view class="info-item" v-if="item.assignName">
<text>司机:</text>
<text class="infoSpan">{{ item.assignName}}</text>
</view>
<!-- <view class="comment-btn" v-if="item.conmentStatus == 0" @click="goEvaluatePage(item.detailId)">受理</view> -->
<!-- <view class="comment-btn bg-ccc" v-if="item.conmentStatus == 1">已受理</view> -->
<view class="comment-yc" @click="finishUseCar(item.id,item.userId)">用车完毕</view>
</view>
</view>
</view>
<content-none v-else :padTop="20"></content-none>
</view>
<!-- 已用车 -->
<view class="reservation-box" v-if="currentTabIndex == 2">
<view class="list-box" v-if="commentList2.length > 0">
<view class="detail" v-for="(item, index) in commentList2" :key="index">
<view class="detail_header">
<text class="blueSign"></text>
<text class="font-tilte">已用车辆</text>
<!-- <text class="slect_icon"></text> -->
<text class="font-result" style="color: #666666;">{{ formatDate(item.createTime, 'dateTime') }}</text>
</view>
<view class="detail_msg">
<view class="info-item">
<text>联系人:</text>
<text class="infoSpan">{{ item.userName }}</text>
</view>
<view class="info-item">
<text>联系电话:</text>
<text class="infoSpan">{{ item.telNumber }}</text>
</view>
<view class="info-item">
<text>乘车人数:</text>
<text class="infoSpan">{{ item.peopleNum}}</text>
</view>
<view class="info-item">
<text>目的地:</text>
<text class="infoSpan">{{ item.destination}}</text>
</view>
<view class="info-item" v-if="item.assignName">
<text>司机:</text>
<text class="infoSpan">{{ item.assignName}}</text>
</view>
</view>
</view>
</view>
<content-none v-else :padTop="20"></content-none>
</view>
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
</view>
</view>
<uni-popup ref="popup" type="center" style="">
<view style="background: white;width: 80%;height: 840upx;width: 600upx;position: relative;border-radius: 10upx;padding: 14upx;">
<view class="tab_rig visitorshow-box" ><!-- uinfo.orgName -->
<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:95%'"
:placeholder = "'请输入姓名、手机号'"
@change="changeSel"
@input="inputSel"
@clear="clearSel"
:selectHideType="'hideAll'"
>
</xfl-select>
</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="closePopup()">取消</view>
<view class="btn btn-col1" style="width:40%;border-radius: 10upx" @click="acceptUseCarApply()">确定</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { getDate, alertTip, callbackRequest, getStorage, regPhone, formatDate } from '@/common/util.js';
import { getUsecarApplyList,getDriverList,acceptUseCarApply,finishUseCar } from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import UniPopup from "@/components/uni-popup/uni-popup.vue"
import xflSelect from '../../components/xfl-select/xfl-select1.vue'
export default {
data() {
return {
page: 1,
page1:1,
page2:1,
pageSize: 10,
loadingType: 0, //0-loading前1-loading中2-没有更多了
loadingType1: 0, //0-loading前1-loading中2-没有更多了
loadingType2: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
userId: getStorage('userInfo').id,
currentTabIndex: 0,
deptList: [], //部门列表
departmentIndex: 0, //选择的部门下标
commentList: [],
//用车中
commentList1:[],
//已用车
commentList2:[],
formatDate: formatDate,
finalList: [],
showList:true,
driverList:[],
driverId:'',
driverName:'',
item:{},
};
},
components: {
loadMore,
contentNone,
UniPopup,
xflSelect
},
onLoad(option) {
this.currentTabIndex = option.currentTabIndex || 0;
if (this.currentTabIndex == 0) {
this.page = 1;
this.loadingType = 0;
this.getUsecarApplyList(0);
}else if(this.currentTabIndex == 1){
this.page1 = 1;
this.loadingType1 = 0;
this.getUsecarApplyList(1);
}else if(this.currentTabIndex == 2){
this.page2 = 1;
this.loadingType2 = 0;
this.getUsecarApplyList(2);
}
this.getDriverList();
},
watch: {
currentTabIndex: function(newVal, oldVal) {
if (newVal == 1) {
this.page1 = 1;
this.loadingType1 = 0;
this.getUsecarApplyList(1);
} else if(newVal == 0){
this.page = 1;
this.loadingType = 0;
this.getUsecarApplyList(0);
}else if(newVal == 2){
this.page2 = 1;
this.loadingType2 = 0;
this.getUsecarApplyList(2);
}
}
},
methods: {
getUsecarApplyList(status) {
let params = {
method: getUsecarApplyList,
data: {
userid: this.userId,
pageSize:this.pageSize,
page:status==0?this.page:status==1?this.page1:this.page2,
status:status,
approvalStatus:1
}
};
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
if(status==0){
if (this.page == 1) {
this.commentList = res.data.returnData;
} else {
if (res.data.returnData.length > 0) {
this.commentList = [...this.commentList, ...res.data.returnData];
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
}else if(status==1){
if (this.page == 1) {
this.commentList1 = res.data.returnData;
} else {
if (res.data.returnData.length > 0) {
this.commentList1 = [...this.commentList1, ...res.data.returnData];
this.loadingType1 = 0;
} else {
this.loadingType1 = 2;
}
}
}else if(status==2){
if (this.page == 1) {
this.commentList2 = res.data.returnData;
} else {
if (res.data.returnData.length > 0) {
this.commentList2 = [...this.commentList2, ...res.data.returnData];
this.loadingType2 = 0;
} else {
this.loadingType2 = 2;
}
}
}
}
});
},
getDriverList(){
let params = {
"method": getDriverList,
"data": {userId:this.userId}
};
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.driverList = list;
this.finalList = list;
})
},
acceptUseCarApply(item){
this.item = item;
//this.closePopup();
let params = {
"method": acceptUseCarApply,
"data": {
id:this.item.id,
assignId:this.driverId,
assignName:this.driverName,
}
};
callbackRequest(params)
.then(res =>{
if (res.data.returnCode == 1) {
alertTip('已成功安排受理');
setTimeout(_ => {
this.currentTabIndex=1;
}, 2000);
} else {
alertTip(res.data.returnMsg);
}
})
},
finishUseCar(id,userId){
let params = {
"method": finishUseCar,
"data": {
id:id,
userId:userId
}
};
callbackRequest(params)
.then(res =>{
if (res.data.returnCode == 1) {
alertTip('用车完毕');
setTimeout(_ => {
this.currentTabIndex=2;
}, 1000);
} else {
alertTip(res.data.returnMsg);
}
})
},
inputSel(e){
this.circulationId="";
if(e.detail.value == ""){
this.finalList = this.driverList;
this.showList = true;
return
}
var finalList = [];
for (var i = 0; i < this.driverList.length; i++) {
let ite = this.driverList[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.driverId = newVal.orignItem.id;
this.driverName = newVal.orignItem.value;
//this.uinfo.orgName = newVal.newVal;
},
clearSel(){
this.driverId="";
this.finalList = this.driverList;
this.showList = true;
},
openPopup(item){
this.item = item;
this.$refs.popup.open();
},
closePopup(){
this.$refs.popup.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';
.container {
position: relative;
overflow: hidden;
min-height: 100vh;
background: #f8f8f8;
.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: 33.3%;
font-size: 30upx;
color: #e5f6ff;
text-align: center;
line-height: 70upx;
}
.active_tab {
background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
}
.reservation-box {
background: #fff;
.time-box {
overflow: hidden;
padding-top: 20rpx;
.time-item {
float: left;
width: 196rpx;
margin: 0 0rpx 20rpx 20rpx;
font-size: 26rpx;
text-align: center;
line-height: 32rpx;
padding: 10rpx 0;
position: relative;
border: 1px solid #ccc;
box-sizing: border-box;
.time-text {
color: #666;
text {
padding: 0 6rpx;
color: #00c277;
}
.color-666 {
color: #666;
}
}
.icon {
position: absolute;
right: 0;
bottom: 0;
width: 36rpx;
height: 36rpx;
display: none;
}
}
.active {
border: 1px solid #00c277;
.icon {
display: block;
}
}
}
.form-box {
// padding: 20upx 30upx 50upx;
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx;
.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;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.form-item:last-child {
border-bottom: 0px;
}
}
/* 评论 */
.evaluate {
padding-top: 30upx;
border-top: 1px solid #eee;
}
.evaluate .title {
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 40upx;
padding: 0 30rpx 30rpx;
}
.evaluate .evaluate_item {
border-bottom: 1px solid #eeeeee;
padding: 0 0 30upx 50upx;
}
.evaluate .evaluate_item:last-child {
border: none;
}
.evaluate .evaluate_item .user {
padding: 20upx 0;
}
.evaluate .evaluate_item .user .username {
font-size: 28rpx;
color: #666;
display: inline-block;
vertical-align: top;
padding-right: 20upx;
}
.evaluate .evaluate_item .user span image {
width: 40upx;
height: 40upx;
margin-right: 5upx;
}
.evaluate .evaluate_item .text {
font-size: 28upx;
color: #666;
line-height: 40upx;
}
}
}
.scroll-view {
padding-top: 30upx;
white-space: nowrap;
width: 100%;
height: 120upx;
.time-item-box {
padding: 0 10upx;
margin: 0 16upx;
display: inline-block;
.time {
display: block;
width: 100%;
font-size: 28upx;
color: #666;
}
.week {
display: block;
width: 100%;
font-size: 28upx;
color: #666;
}
}
.time-active {
.time {
color: #00c277;
}
.week {
color: #00c277;
}
}
}
}
.list-box {
background-color: #f8f8f8;
.detail {
// margin-top: 10upx;
margin-bottom: 14upx;
background: #ffffff;
border-radius: 4upx;
}
.detail_header {
padding: 15upx 30upx;
border-bottom: 1px solid #eee;
}
.detail_header .blueSign {
height: 30upx;
width: 10upx;
background: #00c277;
display: inline-block;
margin: 10upx 14upx 0 0;
}
.detail_header .font-tilte {
display: inline-block;
font-size: 28upx;
color: #333;
line-height: 50upx;
vertical-align: top;
}
.detail_header .font-result {
display: inline-block;
float: right;
font-size: 26upx;
color: #00c277;
line-height: 50upx;
vertical-align: top;
}
.detail_msg {
padding: 20upx 30upx;
overflow: hidden;
}
.detail_msg .info-item {
margin-bottom: 10upx;
font-size: 28upx;
text {
display: inline-block;
width: 140upx;
}
.infoSpan {
width: auto;
font-size: 28upx;
color: #666;
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
.comment-yc {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
}
.comment-item{
overflow:hidden;
margin-top:20rpx;
.user-head{
float:left;
width:90upx;
height:90upx;
border-radius:50%;
image{
width:100%;
height:100%;
border-radius:50%;
}
}
.fr-content{
margin:0 0 0upx 110upx;
border-bottom:1px solid #f5f5f5;
padding-bottom:26upx;
.name{
font-size:28upx;
font-weight:bold;
line-height:44upx;
}
.date{
float:right;
font-size:26upx;
color:#666;
line-height:44upx;
}
.grade{
padding-bottom:10upx;
text{
display:inline-block;
font-size:26upx;
color:#666;
line-height:36upx;
vertical-align: top;
padding-right:20upx;
}
image{
width:36upx;
height:36upx;
margin-right:8upx;
vertical-align: top;
}
}
.comment-content{
font-size:26upx;
color:#666;
line-height:40upx;
margin: 6upx;
}
.food-list{
padding:10rpx 0 0;
overflow:hidden;
.food-item{
float:left;
margin-right:10rpx;
font-size:24rpx;
line-height:30rpx;
color:$assistColor;
padding:4rpx 16rpx;
border:1px solid $assistColor;
}
}
}
}
</style>