hz-zhhq-app/pages/washcar/washCarAccept.vue

730 lines
17 KiB
Vue
Raw Normal View History

2025-01-22 10:53:47 +08:00
<template>
<view class="hzIndex">
<hzHeader title="洗车受理"></hzHeader>
<view class="container hzContent">
<view class="main" :style="{paddingBottom:currentTabIndex == 0?'300upx':'180upx'}">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''"
@click="currentTabIndex = 0">
洗车受理
<view class="tabBottom" v-if="currentTabIndex == 0"></view>
</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''"
@click="currentTabIndex = 1">
预约记录
<view class="tabBottom" v-if="currentTabIndex == 1"></view>
</view>
</view>
<view class="reservation-box" v-if="currentTabIndex == 0 ">
<view class="selectDate">
<scroll-view scroll-x="true" class="scroll-view">
<view class="time-item-box" :class="chooseDateIndex == index ? 'time-active' : ''"
v-for="(item,index) in date" :key="index" @click="chooseDateIndex = index">
<view class="time">{{item.tiems.substr(5,10)}}</view>
<view class="week">{{item.week}}</view>
</view>
</scroll-view>
<view class="barber">
<view style="font-size: 14px;color:#666">地点</view>
<view class="barber-box">
<view class="barber-item" v-for="(item, index) in placeArr"
:class="placeArrIndex == index ? 'barberactive' : ''" :key="index"
@click="choosePlace(index)">
{{item}}
</view>
</view>
</view>
</view>
<!-- 预约记录列表 -->
<view v-if="reservationList.length > 0" class="flex-item">
<view class="order-detail" v-for="(item, index) in reservationList" :key="index">
<view class="detail" v-if="item.concat_user_name!=null">
<view class="row-1">
<view class="text_time">{{ item.wash_car_time }}</view>
<view class="text_cph">{{ item.licenseplate }}</view>
<view class="text_loc">{{ item.apply_place }}</view>
</view>
<view class="row-2">
<view class="text_name">{{ item.concat_user_name }}</view>
<view class="text_tel">{{ item.concat_phone }}</view>
</view>
<view class="flex-btn">
<view v-if="item.endremind ==0" @click="cancleWashCar(item)" class="qc-btn">车主未至
</view>
<view v-if="item.endremind ==0" @click="remindPickUpCar(item)" class="qc-btn">通知取车
</view>
<view v-if="item.endremind > 0" class="qc-btn bg-gray">已通知</view>
</view>
</view>
<view class="detail-empty" v-if="item.concat_user_name==''||item.concat_user_name==null">
<view class="no-time">{{ item.wash_car_time }}</view>
<view class="no-text">无预约</view>
</view>
</view>
</view>
<content-none v-else :padTop="25"></content-none>
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
</view>
<view v-if="currentTabIndex==1">
<view class="search-box">
<view class="form-item searchv">
<picker class="time-data" mode="date" @change="startDateChange">
<view class="">{{ startDate }}</view>
</picker>
<text class="timecenter"></text>
<picker class="time-data" mode="date" @change="endDateChange">
<view class="">{{ endDate }}</view>
</picker>
<!-- <view class="search" style="height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchYjList">搜索</view> -->
<!-- <image style="width: 5vh;height: 5vh;margin-left: 1vh;" @click="search" src="/static/icons/seach.png" mode=""></image>
-->
</view>
<view class="tj-box">
<text style="font-size: 28upx; color: #666666;">时段内预约总数</text>
<text style="font-size: 32upx;color: #0DB0A7;">{{count}}</text>
</view>
</view>
<view class="list-box" v-if="appointlist.length > 0">
<view class="detail-box" v-for="(item, index) in appointlist" :key="index">
<view class="detail_header">
<image class="blueSign" src="@/static/img/carIcon.png" mode=""></image>
<text class="font-tilte">洗车预约</text>
<!-- <text class="slect_icon"></text> -->
<text class="font-result" v-if="item.int_status==0">预约成功</text>
<text class="font-result" v-if="item.int_status==1" style="color: #666666;">已取消</text>
<text class="font-result" v-if="item.int_status==2" style="color: red;">车主未至</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.concatPhone }}</text>
</view>
<view class="info-item">
<text>预约时间</text>
<text class="infoSpan">{{ item.timeQ }}</text>
</view>
<view class="info-item">
<text>  </text>
<text class="infoSpan">{{ item.licensePlate }}</text>
</view>
<view class="info-item">
<text>  </text>
<text class="infoSpan">{{ item.apply_place}}</text>
</view>
<view class="info-item">
<text>申请时间</text>
<text class="infoSpan">{{ formatDate(item.apply_time) }}</text>
</view>
</view>
</view>
</view>
<content-none :padTop="20" v-else></content-none>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getDate,
getStorage,
alertTip,
callbackRequest,
formatDate
} from '@/common/util.js';
import {
getDoWashCarList,
getWashInfoByDate,
remindPickUpCar,
cancleWashCar,
getAllWashCarList
} from '@/common/api.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
export default {
data() {
return {
formatDate: formatDate,
userId: getStorage('userInfo').id,
page: 1,
pageSize: 10,
currentTabIndex: 0,
loadingType: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: "上拉加载更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
},
date: getDate(),
chooseDateIndex: 0,
reservationList: [],
applyPlace: '',
placeArr: ['全部', '科技楼'],// '后勤中心'
placeArrIndex: 0,
formatDate: formatDate,
startDate: this.getDay(-7),
endDate: this.getDay(0),
count: 0,
appointlist: [],
};
},
components: {
loadMore,
contentNone
},
onReachBottom() {
if (this.loadingType !== 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.getList();
},
onLoad(options) {
this.applyPlace = options.applyPlace || '科技楼';
this.placeArrIndex = this.applyPlace == '科技楼' ? 0 : 1;
this.initData();
this.page = 1;
this.loadingType = 0;
this.getList();
},
watch: {
chooseDateIndex: function(newVal, oldVal) {
this.page = 1;
this.loadingType = 0;
this.initData();
}
},
methods: {
choosePlace(index) {
this.placeArrIndex = index;
this.applyPlace = this.placeArr[this.placeArrIndex];
this.initData();
},
initData() {
let params = {
method: getWashInfoByDate,
data: {
userId: this.userId,
applyDate: this.date[this.chooseDateIndex].tiems,
applyPlace: this.applyPlace
}
}
console.log(params)
callbackRequest(params)
.then(res => {
if (res.data.returnCode == 1) {
this.reservationList = res.data.returnData;
}
})
},
onNavigationBarButtonTap(e) {
const index = e.index;
if (index == 0) {
var url = "/pages/washcar/washcar-history";
uni.navigateTo({
url
});
}
},
remindPickUpCar(item) {
if (item.concat_user_name == null) {
return;
} else {
uni.showModal({
title: '确认',
content: '请确认是否通知取车。',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
let params = {
method: remindPickUpCar,
data: {
id: item.id,
}
};
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
alertTip(res.data.returnMsg);
setTimeout(_ => {
this.initData();
}, 1000);
}
});
} else if (res.cancel) {}
}
});
}
},
cancleWashCar(item) {
uni.showModal({
title: '确认',
content: '请确认是否设置为车主未至!',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
let params = {
method: cancleWashCar,
data: {
id: item.id,
intStatus: 2
}
};
callbackRequest(params).then(res => {
if (res.data.returnCode == 1) {
alertTip(res.data.returnMsg);
setTimeout(_ => {
this.initData();
}, 1000);
} else {
alertTip(res.data.returnMsg);
}
});
} else if (res.cancel) {}
}
});
},
getList() {
// let lfDatas = uni.getStorageSync('lfDatas');
// this.appointlist = lfDatas;
let params = {
method: getAllWashCarList,
data: {
pageNum: this.page,
pageSize: this.pageSize,
startDate: this.startDate,
endDate: this.endDate,
userId: getStorage('userInfo').id
}
};
console.log('入参', params)
callbackRequest(params).then(res => {
console.log('res', res)
if (res.data.returnCode == 1) {
if (this.page == 1) {
this.appointlist = res.data.returnData.list || [];
this.count = res.data.returnData.count || 0;
} else {
if (res.data.returnData.length > 0) {
this.appointlist = this.appointlist.concat(res.data.returnData.list);
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
}
});
},
startDateChange: function(e) {
this.startDate = e.target.value;
this.page = 1;
this.loadingType = 0;
this.getList();
},
endDateChange: function(e) {
this.endDate = e.target.value;
this.page = 1;
this.loadingType = 0;
this.getList();
},
getDay(i) {
var date1 = new Date(new Date().getTime() + i * 24 * 60 * 60 * 1000);
var year = date1.getFullYear();
var month = date1.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var day = date1.getDate();
if (day < 10) {
day = "0" + day;
}
return year + '-' + month + '-' + day;
},
}
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.main {
.tab-box {
width: 80%;
display: flex;
font-size: 36upx;
color: #555555;
.active_tab {
font-weight: 800;
}
.tab-item {
width: 40%;
.tabBottom {
width: 28%;
height: 6upx;
border-radius: 5px;
background-image: linear-gradient(to right, #64E182, #1CA7B2);
}
}
}
}
.barber {
margin-top: 32upx;
margin-left: 24upx;
border-bottom: 1px solid #eee;
.barber-box {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 24upx;
.barber-item {
width: 100*2upx;
height: 38*2upx;
background: #F2F6FA;
border-radius: 4*2upx;
border: 1px solid #F2F6FA;
line-height: 38*2upx;
color: #555555;
text-align: center;
font-size: 28upx;
margin-left: 28upx;
}
.barber-item:first-child {
margin-left: 0;
}
.barberactive {
background: #EDFCF7;
border: 1px solid #00ADA6;
color: #0DB0A7;
}
}
}
.container {
padding: 22upx;
margin-top: 150upx;
}
.selectDate {
background-color: #ffffff;
border-radius: 20upx;
padding-bottom: 24upx;
}
.scroll-view {
margin-top: 20upx;
padding: 26upx 8upx;
white-space: nowrap;
.time-item-box {
margin: 0 8upx;
display: inline-block;
font-weight: 400;
font-size: 28upx;
color: #555;
border-radius: 16upx;
padding: 18upx 20upx;
background-color: #F2F6FA;
border: 1px solid #F2F6FA;
text-align: center;
}
.time-active {
background: #EDFCF7;
color: #0DB0A7;
border: 1px solid #0DB0A7;
}
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/deep/.uni-scroll-view-content {
display: flex;
}
.flex-item {
margin-top: 24upx;
padding: 24upx;
background-color: #ffffff;
padding-top: 0;
border-radius: 20upx;
overflow: hidden;
.detail {
background: #EDFCF7;
padding: 24upx;
display: grid;
.row-1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.text_time {
font-weight: bold;
font-size: 32upx;
color: #333333;
}
.text_cph {
font-size: 28upx;
color: #555555;
}
.text_loc {
font-size: 28upx;
color: #0DB0A7;
}
}
.row-2 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
font-size: 28upx;
color: #555555;
border-bottom: 1px dashed #B4E1DE;
.text_name {
margin-right: 24upx;
line-height: 70upx;
}
.text_tel {}
}
.flex-btn {
display: flex;
flex-direction: row;
align-items: center;
font-size: 24upx;
color: #0DB0A7;
text-align: center;
justify-self: end;
margin-top: 24upx;
.qc-btn {
width: 92*2upx;
height: 32*2upx;
border-radius: 32upx;
border: 1px solid #0DB0A7;
line-height: 32*2upx;
margin-left: 24upx;
}
}
}
}
.order-detail {
margin-top: 24upx;
border-radius: 6*2upx;
}
.order-detail .bg-gray {
background-color: #cfcfcf;
}
.detail-empty {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 46*2upx;
background: #F2F6FA;
border-radius: 16upx;
padding: 0 24upx;
.no-time {
font-weight: bold;
font-size: 16*2upx;
color: #333333;
line-height: 46*2upx;
}
.no-text {
font-size: 14px;
color: #CACACA;
line-height: 46*2upx;
}
}
.search-box {
margin-top: 36upx;
padding: 24upx;
background-color: #fff;
border-radius: 20upx;
}
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
}
.searchv {
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.timecenter {
display: inline-block;
font-size: 24upx;
margin-left: 10upx;
margin-right: 10upx;
color: #555555;
line-height: 30upx;
// margin-top: 15upx;
}
.time-data {
width: 300upx;
height: 60upx;
font-size: 28upx;
display: inline-block;
border: 1px solid #0DB0A7;
border-radius: 8upx;
color: #555555;
line-height: 60upx;
}
.tj-box {
margin-top: 28upx;
display: flex;
flex-direction: row;
align-items: center;
}
.list-box {
margin: unset;
margin-top: 24upx;
.detail-box {
// margin-top: 10upx;
margin-bottom: 24upx;
background: #ffffff;
border-radius: 20upx;
padding: 24upx;
}
.detail_header {
padding: 15upx 0upx;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.detail_header .blueSign {
width: 48upx;
height: 48upx;
}
.detail_header .font-tilte {
display: inline-block;
font-weight: bold;
font-size: 18px;
color: #333333;
margin-left: 16upx;
}
.detail_header .font-result {
display: inline-block;
position: absolute;
width: 80*2upx;
height: 28*2upx;
right: 0upx;
background: #C1EFEA;
border-radius: 15px 15px 15px 15px;
font-size: 28upx;
color: #0DB0A7;
text-align: center;
line-height: 28*2upx;
}
.detail_msg {
display: grid;
margin-top: 20upx;
}
.detail_msg .info-item {
font-size: 28upx;
color: #999999;
margin-bottom: 10upx;
font-size: 28upx;
line-height: 50upx;
text {
display: inline-block;
width: 140upx;
}
.infoSpan {
width: auto;
font-size: 28upx;
color: #666;
float: right;
}
}
.detail_msg .info-item:nth-of-type(6) {
padding-bottom: 24upx;
border-bottom: 1px solid #EBEFF7;
}
.detail_msg .info-item:last-child {
padding-bottom: 24upx;
border-bottom: 0px solid #000;
}
.comment-btn {
margin-top: 24upx;
width: 84*2upx;
height: 32*2upx;
border-radius: 16*2upx;
border: 1px solid #0DB0A7;
font-size: 28upx;
color: #0DB0A7;
line-height: 32*2upx;
text-align: center;
min-width: 140upx;
justify-self: end;
}
.bg-ccc {
border-color: #CACACA;
color: #CACACA;
background-color: #fff !important;
}
}
</style>