<template>
|
<view>
|
<Nav title="车辆预约" customBack="pages/myInfo/index" ></Nav>
|
<view class="u-page">
|
<view v-if="indexList.length > 0" style="padding-top: 10px">
|
<view v-for="(item, index) in indexList" :key="index" class="list-item">
|
<view class="item-cell"><view class="w-100px">车牌号</view><view>{{ item.carNo }}</view></view>
|
<view class="item-cell"><view class="w-100px">预约地点</view><view>{{ getPositionStr(item.position) }}</view></view>
|
<view class="item-cell">
|
<view class="w-100px">进出场类型</view>
|
<view>{{ item.entryExitFlagName }}</view></view>
|
<view style="display: flex;align-items: center;" >
|
<view class="w-100px" >预约时间</view>
|
<view>{{ item.startTime }}</view>
|
<!-- <view class="item-cells">
|
<view>{{ item.startTime }}</view>
|
<view class="pre" >{{item.endTime }}</view>
|
</view> -->
|
|
|
</view>
|
<view class="item-cell"><view class="w-100px">审核状态</view><view :style="{color:auditStatus(item.auditStatus)}">{{ item.auditStatusName }}</view></view>
|
|
|
<view class="item-cell" v-if="item.auditStatus == 1"><view class="w-100px">车辆状态</view><view>{{ item.statusName }}</view></view>
|
<view class="item-cell" v-if="item.auditStatus == 2"><view class="w-100px">不通过原因</view><view>{{ item.auditRemark }}</view></view>
|
</view>
|
<view class="u-p-b-20 u-m-t-20">
|
<u-loadmore :status="load.status" color="#999999" :icon-type="load.icon" :load-text="load.text"></u-loadmore>
|
</view>
|
</view>
|
<view v-else style="padding-top: 25%;">
|
<u-empty mode="message" text="暂无预约信息"></u-empty>
|
</view>
|
<view class="bottom-box">
|
<view class="custom-back">
|
<u-button @click="goUrl('pages/myInfo/index')" text="返回"></u-button>
|
|
</view>
|
<view class="custom-add">
|
<u-button type="primary" @click="goUrl('pages/vehicle/index')" text="新增车辆预约"></u-button>
|
|
</view>
|
</view>
|
|
|
<view class="semicircle-container" @click="goOpen" >
|
<view class="semicircle-image-container" >
|
<u-image class="semicircle-image" :src=" '/static/image/yx.png'" width="30px" height="30px"></u-image>
|
</view>
|
</view>
|
|
<u-popup :show="show" mode="bottom" :round="10" @close="close" @open="open">
|
<view style="padding: 10px;" >
|
<view >
|
<view style="text-align: center" >
|
<text>入园安全告知书</text>
|
</view>
|
<view style="line-height: 40px;" >尊敬的来宾：</view>
|
<view >欢迎您来到粤港澳物流园，为了您的安全和本公司的安全管理工作，进入园区请您遵循以下规定：</view>
|
<view>一、进入园区请主动配合登记备案，来访人员车辆请按指定停车位停放。</view>
|
<view>二、为了您和他人的安全，未经许可请勿进入生产区域。</view>
|
<view>三、未经报备禁止私自进入海关监管场所。进入特定区域，请佩戴相应的个人防护用品。</view>
|
<view>四、进入园区不得私自带有易燃、易爆、易腐蚀、有毒物品，未经许可禁止拍照、摄像。</view>
|
<view>五、非指定吸烟区外严禁吸烟。</view>
|
<view>六、机动车辆进入园区必须按规定路线行驶，进出门及转弯限速5km/h,直行限速10km/h，注意避让行人。</view>
|
<view>七、所有人员均需严格遵循园区安全规定，紧急情况应听从公司安保人员指挥。</view>
|
|
</view>
|
</view>
|
<view style="padding: 10px;margin-top: 20px;">
|
|
<u-button type="primary" @click="closeOpen" text="以上安全告知我已悉知，并严格遵守。"></u-button>
|
</view>
|
</u-popup>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {getApplyCarList} from "@/common/api";
|
export default {
|
name: "index",
|
data(){
|
return{
|
list1: [],
|
show: true,
|
indexList: [],
|
queryForm:{
|
pageNum:1,
|
pageSize:10,
|
},
|
load:{
|
status: 'loadMore',
|
icon: 'flower',
|
text:{
|
loadmore: '上拉加载',
|
loading:'努力加载中',
|
nomore : '没有更多数据了'
|
}
|
},
|
auditStatusList:[
|
'待审核','审核通过','审核不通过','系统作废'
|
],
|
statusList:[
|
'待入园','已入园','已出园'
|
]
|
}
|
},
|
onLoad(params){
|
uni.setNavigationBarTitle({ title: '车辆预约列表',})
|
this.getApiPage();
|
if(params.parm == 'false'){
|
this.show = false;
|
}
|
},
|
//底部触发
|
onReachBottom(){
|
if (this.load.status !== 'nomore'){
|
this.load.status = 'loading';
|
this.queryForm.pageNum = this.queryForm.pageNum +1;
|
this.getApiPage();
|
}
|
},
|
methods: {
|
getPositionStr(position){
|
if(position == 1){
|
return '物流园'
|
}else if(position == 2){
|
return '办公楼'
|
}else {
|
return '物流园/办公楼'
|
}
|
},
|
auditStatus(status){
|
if(status == 0){
|
return '#3c9cff'
|
}else if(status == 1){
|
return '#5ac725'
|
}else if(status == 2){
|
return '#f56c5c'
|
}else if(status == 3){
|
return '#e6a23c'
|
}
|
},
|
goToDetail(e){
|
this.$u.route({url:'pages/announcement/detail',params:{id:e.name}});
|
},
|
goUrl(url){
|
if (url === 'pages/myInfo/index'){
|
this.$u.route({url:url, type: 'redirectTo',});
|
|
}else{
|
this.$u.route({url:url,});
|
}
|
|
},
|
getApiPage() {
|
const _this = this;
|
_this.queryForm.applyId = _this.car_open_id;
|
getApplyCarList(_this.queryForm).then(res=>{
|
this.$nextTick(()=>{
|
res.rows.forEach(item=>{
|
item.auditStatusName = this.auditStatusList[item.auditStatus];
|
item.statusName = this.statusList[item.status];
|
item.entryExitFlagName = item.entryExitFlag === 'I'?'进园': item.entryExitFlag === 'E'? '出园':'进园+出园';
|
})
|
if (_this.queryForm.pageNum === 1){
|
_this.indexList = res.rows;
|
}else{
|
_this.indexList.push(...res.rows);
|
}
|
this.$forceUpdate();
|
})
|
if (res.haveNextPage && this.queryForm.pageSize === res.rows.length){
|
this.load.status = 'loadmore';
|
}else{
|
this.load.status = 'nomore';
|
}
|
})
|
},
|
open() {
|
// console.log('open');
|
},
|
close() {
|
// this.show = false
|
// console.log('close');
|
},
|
goOpen() {
|
this.show = true
|
},
|
closeOpen () {
|
this.show = false
|
|
}
|
|
},
|
}
|
</script>
|
|
<style scoped>
|
.bottom-box{
|
position: fixed;
|
bottom: 0;width: 100%;padding: 0 2%; box-sizing: border-box;
|
background: #ffffff;height: 68px;display: flex;justify-content: space-between;align-items: center;
|
}
|
.custom-back{
|
|
width: 32%;
|
}
|
.custom-add{
|
width: 62%;
|
}
|
.list-item{
|
width: 94%;
|
padding: 10px;box-sizing: border-box;
|
border-radius: 4px;background: #ffffff;border: 1px solid #e4e7ed;
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
|
margin: 0 auto 10px;
|
}
|
.item-cell{
|
display: flex;justify-content: left;align-items: center;font-size: 16px;line-height: 28px
|
}
|
.item-cells{
|
font-size: 16px;line-height: 28px
|
}
|
.w-100px{
|
width: 100px;
|
}
|
/* 半椭圆样式 */
|
/* 半椭圆样式 */
|
.semicircle-container {
|
position: fixed;
|
|
top: 50%;
|
right: 5%;
|
transform: translate(50%, -50%) rotate(270deg);
|
width: 50px;
|
height: 50px;
|
background-color: #f8f8f8; /* 背景颜色可以根据需要调整 */
|
border: 1px solid #e4e7ed;
|
border-radius: 120px 120px 0 0; /* 创建半椭圆 */
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
overflow: hidden;
|
}
|
.semicircle-image-container{
|
transform: rotate(90deg); /* 确保图片不旋转 */
|
}
|
.semicircle-image {
|
width: 30px;
|
height: 30px;
|
|
}
|
|
.pre {
|
white-space: pre;
|
}
|
</style>
|
