lanan-app/pages/my/carlist.vue

693 lines
13 KiB
Vue
Raw Normal View History

2024-08-20 20:02:05 +08:00
<!-- 历史订单列表-->
<template>
<view class="content">
2024-08-21 23:48:29 +08:00
<view style="background: #317dfa">
<VNavigationBar title="扣车管理"></VNavigationBar>
<view class="search-box">
<view class="s-input">
<uni-icons type="search" color=" #999999" size="16"></uni-icons>
<input type="text" v-model="licenseNum" placeholder="车牌号搜索">
2024-08-22 21:28:23 +08:00
<uni-icons @click="licenseNum = ''" type="clear" color="#8E8E93"></uni-icons>
2024-08-21 23:48:29 +08:00
</view>
<view class="search-button" @click="getlist()">搜索</view>
</view>
<view class="top-tap">
<!-- <view class="tap-box" :class="{'cc' : gindex == item.id }" v-for="(item,index) in arrtap" :key="index"
@click="getindex(item.id)">
<view style="margin-bottom: 4px;">{{item.text}}</view>
<view class="gang" v-if="item.id == gindex"></view>
</view> -->
<view class="tap-box" :class="{'cc' : gindex == 9 }" @click="getindex(9)">
<view style="margin-bottom: 4px;">扣车中 ({{one}}) </view>
<view class="gang" v-if="9 == gindex"></view>
</view>
<view class="tap-box" :class="{'cc' : gindex == 3 }" @click="getindex(3)">
<view style="margin-bottom: 4px;">已解扣 ({{two}}) </view>
<view class="gang" v-if="3 == gindex"></view>
</view>
<view class="tap-box" :class="{'cc' : gindex == 8 }" @click="getindex(8)">
<view style="margin-bottom: 4px;">已还车 ({{three}}) </view>
<view class="gang" v-if="8 == gindex"></view>
</view>
2024-08-21 20:22:02 +08:00
</view>
</view>
2024-08-20 20:02:05 +08:00
<view class="dil">
<view class="ques" v-if="orderList.length== 0 ">
<image src="../../static/quesheng.png" mode=""></image>
</view>
2024-08-21 20:22:02 +08:00
<view class="boxa-box" v-for="(item,index) in orderList" :key="index">
<view class="boxa" :style="{borderRadius: gindex === 3 ? '10px 10px 0 0' : '10px'}">
<view class="car-card-line">
<view class="car-card-line">
<view class="car-card">车牌号</view>
<view class="hei-title">{{item.licenseNum || ''}}</view>
</view>
<view class="car-card-state" :class="8 == gindex ? 'state-blue' : 3 == gindex ? 'state-green' : 'state-red'">{{ 8 == gindex ? '已还车' : 3 == gindex ? '已解扣' : '扣车中' }}</view>
</view>
<view class="box-bs">
<view class="zc">车主{{item.connectionName || ''}}</view>
<view class="zc">联系电话{{item.connectionPhone || ''}}</view>
</view>
<view class="yihang">扣车时间{{item.createTime || ''}}</view>
<view class="yihang">扣车地点{{item.rescuePosition || ''}}</view>
<view class="yihang">取车地点{{item.kcPosition || ''}}</view>
</view>
<view class="janniu" v-if="gindex == 3" @click="getjiji(item.id)">
<text>立即还车</text>
</view>
</view>
2024-08-20 20:02:05 +08:00
<!-- <view class="boxt" v-for="(item,index) in orderList" :key="index" @click="godetail(item.id)">
<view class="boxt-left">
<view class="left-lan">
<view class="">{{item.rescueTypeStr}}</view>
</view>
<view class="text1">{{item.kcPosition}}</view>
<view class="text1">
<text>姓名</text>
<text style="font-weight: 400;">{{item.connectionName}}</text>
</view>
<view class="text1">
<text>手机号</text>
<text style="font-weight: 400;">{{item.connectionPhone}}</text>
</view>
<view class="text1">
<text>车牌号</text>
<text style="color: #207efe;"> {{item.licenseNum}}</text>
</view>
<view class="text1">
<text>时间</text>
<text style="font-weight: 400;"> {{item.rescueTime}}</text>
</view>
2024-08-21 20:22:02 +08:00
2024-08-20 20:02:05 +08:00
</view>
<view class="boxt-right">
<view class="aniiu" v-if="gindex == 3">
还车
</view>
</view>
</view> -->
<view style="width: 100%; height: 60px;"></view>
</view>
<!-- <tabBar></tabBar> -->
</view>
</template>
<script>
import tabBar from '../../components/tabBar/tabBar.vue'
import request from '../../utils/request';
2024-08-21 20:22:02 +08:00
import VNavigationBar from 'components/VNavigationBar.vue'
2024-08-20 20:02:05 +08:00
export default {
data() {
return {
one: 0,
two: 0,
three: 0,
2024-08-21 21:59:11 +08:00
gindex: 9,
orderList: [],
2024-08-20 20:02:05 +08:00
licenseNum: '',
rescueStatus: '',
total: 0,
pageNum: 1, //第几页
pageSize: 10, //一页多少张
totalPages: 0, //总数
arrtap: [{
text: '扣车中',
id: 9
},
{
text: '已解扣',
id: 3
},
{
text: '已还车',
id: 8
},
],
arrbox: []
}
},
components: {
tabBar,
2024-08-21 20:22:02 +08:00
VNavigationBar
2024-08-20 20:02:05 +08:00
},
onLoad() {
this.getthree()
this.getlist()
},
onReachBottom() {
console.log('执行了');
if (this.orderList.length >= this.totalPages) {
uni.showToast({
title: '没有下一页数据',
icon: 'none'
})
} else {
this.pageNum++
this.getlist()
}
},
methods: {
getthree() {
request({
url: '/app/rescueInfo/getRescueList',
method: 'get',
params: {
licenseNum: '',
rescueStatus: 9,
pageSize: 10,
pageNum: 1,
}
}).then((res) => {
if (res.code == 200) {
this.one = res.total
}
})
request({
url: '/app/rescueInfo/getRescueList',
method: 'get',
params: {
licenseNum: '',
rescueStatus: 3,
pageSize: 10,
pageNum: 1,
}
}).then((res) => {
if (res.code == 200) {
this.two = res.total
}
})
request({
url: '/app/rescueInfo/getRescueList',
method: 'get',
params: {
licenseNum: '',
rescueStatus: 8,
pageSize: 10,
pageNum: 1,
}
}).then((res) => {
if (res.code == 200) {
this.three = res.total
}
})
},
godetail(id) {
},
getjiji(id) {
request({
url: '/app/rescueInfo/hcOpen',
method: 'post',
params: {
rescueId: id
}
}).then((res) => {
if (res.code == 200) {
uni.showToast({
title: "操作成功"
})
this.orderList = []
this.getlist()
this.getthree()
}
})
},
getlist() {
let data = {
licenseNum: this.licenseNum,
rescueStatus: this.gindex,
pageSize: this.pageSize,
pageNum: this.pageNum,
}
request({
url: '/app/rescueInfo/getRescueList',
method: 'get',
params: data
}).then((res) => {
if (res.code == 200) {
if (this.pageNum != 1) {
this.orderList = this.orderList.concat(res.rows)
} else {
this.orderList = res.rows
}
this.totalPages = res.total
}
})
},
getback() {
uni.navigateBack({
delta: 1,
})
},
getindex(index) {
this.orderList = []
this.gindex = index
this.getlist()
},
}
}
</script>
<style scoped lang="scss">
2024-08-21 20:22:02 +08:00
.car-card-line{
display: flex;
justify-content: space-between;
align-items: center;
}
.car-card{
font-size: 15px;
font-weight: bold;
width: 70px;
height: 28px;
line-height: 28px;
border-radius: 10px 0 10px 0;
background: #edf3fe;
color: #4487fa;
text-align: center;
}
.car-card-state{
font-size: 15px;
width: 70px;
height: 28px;
line-height: 28px;
text-align: center;
}
.state-blue{
background: #edf3fe;
color: #4487fa;
}
.state-red{
background: #fbeced;
color: #d63338;
}
.state-green{
background: #edf7ec;
color: #48be3a;
}
2024-08-20 20:02:05 +08:00
.content {
width: 100%;
height: calc(100vh);
2024-08-21 20:22:02 +08:00
background-color: #f6f7fc;
2024-08-20 20:02:05 +08:00
box-sizing: border-box;
2024-08-22 21:28:23 +08:00
//padding-top: 45px;
2024-08-20 20:02:05 +08:00
}
.top-icon {
box-sizing: border-box;
width: 100%;
padding: 5px 14px;
2024-08-21 20:22:02 +08:00
background: #317dfa;
2024-08-20 20:02:05 +08:00
display: flex;
justify-content: space-between;
align-items: center;
}
.dil {
2024-08-21 20:22:02 +08:00
background-color: #f6f7fc;
2024-08-20 20:02:05 +08:00
box-sizing: border-box;
padding: 15px 12px;
2024-08-22 21:28:23 +08:00
height: calc(100% - 155px);
overflow-y: auto;
2024-08-20 20:02:05 +08:00
}
.h-text {
font-size: 14px;
font-weight: 400;
2024-08-21 20:22:02 +08:00
color: #ffffff;
}
.search-box{
display: flex;
align-items: center;
justify-content: center;
}
.search-button{
width: 15%;
height: 30px;
font-size: 14px;
margin: 10px;
line-height: 30px;
text-align: center;
color: #ffffff;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
}
2024-08-20 20:02:05 +08:00
.s-input {
2024-08-22 21:28:23 +08:00
margin-left: 10px;
width: 78%;
height: 56rpx;
background: #fff;
border-radius: 50px;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0px 10px;
2024-08-20 20:02:05 +08:00
2024-08-22 21:28:23 +08:00
input {
margin-left: 5px;
flex: 1;
width: 0;
font-size: 14px;
color: #999999;
}
2024-08-20 20:02:05 +08:00
}
.top-tap {
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
padding-top: 5px;
}
.tap-box {
width: 33%;
font-size: 15px;
font-weight: 400;
2024-08-21 20:22:02 +08:00
color: #ffffff;
2024-08-20 20:02:05 +08:00
text-align: center;
}
.gang {
width: 80%;
2024-08-21 20:22:02 +08:00
height: 3px;
margin: 1px auto;
2024-08-20 20:02:05 +08:00
border-radius: 12px;
2024-08-21 20:22:02 +08:00
background: white;
2024-08-20 20:02:05 +08:00
}
.d-box {
width: 100%;
// height: 100px;
background: white;
border-radius: 10px;
margin-bottom: 15px;
box-sizing: border-box;
padding: 8px;
position: relative;
overflow: hidden;
padding-top: 30px;
}
.d-y-top {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 20px;
border-radius: 0px 0px 6px 0px;
background-color: #339DFF;
color: white;
font-size: 12px;
text-align: center;
}
.t-right {
width: 100%;
display: flex;
justify-content: flex-end;
.bq {
width: 55px;
height: 20px;
background: #FFD7D7;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #FF4C4C;
display: flex;
justify-content: center;
align-items: center;
}
.bq2 {
width: 55px;
height: 20px;
background: #CDE2FF;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #3289FF;
display: flex;
justify-content: center;
align-items: center;
}
}
.d-left {
margin-left: 10px;
display: flex;
font-size: 16px;
font-weight: bold;
color: #666666;
margin-bottom: 10px;
}
.t-left {
margin-left: 10px;
display: flex;
font-size: 12px;
font-weight: 400;
color: #666666;
margin-bottom: 5px;
}
.x-left {
margin-left: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 400;
color: #666666;
}
.cc {
font-weight: bold;
}
.hong {
font-size: 16px;
font-weight: 400;
color: #F85021;
}
.ques {
margin: 0px auto;
margin-top: 40px;
width: 80%;
image {
width: 100%;
}
}
.boxt {
// height: 110px;
width: 100%;
background-color: white;
border-radius: 6px;
margin-top: 14px;
overflow: hidden;
display: flex;
align-items: center;
box-sizing: border-box;
padding-bottom: 15px;
}
.boxt-left {
width: 80%;
height: 100%;
}
.left-lan {
width: 50px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: #207EFE;
font-size: 14px;
color: white;
border-radius: 0px 0px 6px 0px;
}
.text1 {
margin-left: 24px;
margin-top: 5px;
color: #333333;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.lanzi {
font-weight: bold;
color: #4C98FF;
}
.text2 {
margin-left: 24px;
margin-top: 5px;
color: #333333;
font-size: 16px;
font-weight: 400;
color: #333333;
}
.boxt-right {
width: 20%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.zhtai {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 25px;
box-sizing: border-box;
background: #FFD7D7;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
color: #FF4C4C;
font-size: 14px;
}
.dianhua {
position: absolute;
bottom: -110px;
right: 10px;
display: flex;
font-size: 14px;
font-weight: 400;
color: #3289FF;
}
.ticon {
width: 12px;
height: 13px;
margin-right: 5px;
image {
width: 100%;
height: 100%;
}
}
.aniiu {
width: 55px;
height: 55px;
border-radius: 50%;
background: #3289FF;
color: white;
display: flex;
align-items: center;
2024-08-21 20:22:02 +08:00
font-size: 18px;
2024-08-20 20:02:05 +08:00
font-weight: bold;
justify-content: center;
}
2024-08-21 20:22:02 +08:00
.boxa-box{
box-sizing: border-box;
width: 95%;
margin: 8px auto;
}
2024-08-20 20:02:05 +08:00
.boxa {
2024-08-21 20:22:02 +08:00
background: #FFFFFF;
padding: 15px;
box-shadow: 0px 0px 8px -5px #888888;
}
2024-08-20 20:02:05 +08:00
.box-bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px auto;
}
.zc {
2024-08-21 20:22:02 +08:00
font-size: 16px;
2024-08-20 20:02:05 +08:00
font-weight: 400;
color: #363636
}
.hei-title {
2024-08-21 20:22:02 +08:00
margin-left: 10px;
font-size: 18px;
2024-08-20 20:02:05 +08:00
font-weight: 600;
color: #363636;
}
.yihang {
2024-08-21 20:22:02 +08:00
font-size: 16px;
2024-08-20 20:02:05 +08:00
font-weight: 400;
color: #363636;
margin-top: 10px;
}
.right-box {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 10px;
}
.janniu {
2024-08-21 20:22:02 +08:00
width: 100%;
height: 45px;
background: #317cfa;
border-radius: 0 0 10px 10px;
2024-08-20 20:02:05 +08:00
display: flex;
align-items: center;
justify-content: center;
color: white;
2024-08-21 20:22:02 +08:00
font-size: 16px;
2024-08-20 20:02:05 +08:00
}
.ques {
width: 90%;
margin: 100px auto;
}
2024-08-21 20:22:02 +08:00
</style>