lanan-old/rescue-user/pages/my/carlist.vue

622 lines
11 KiB
Vue
Raw Normal View History

2024-07-17 14:16:22 +08:00
<!-- 历史订单列表-->
<template>
<view class="content">
<view class="top-icon">
<view class="h-text" @click="getback()">返回</view>
<view class="s-input">
<uni-icons type="search" color=" #999999" size="16"></uni-icons>
<input type="text" v-model="licenseNum" placeholder="车牌号搜索">
</view>
<view class="h-text" @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>
</view>
<view class="dil">
<view class="ques" v-if="orderList.length== 0 ">
<image src="../../static/quesheng.png" mode=""></image>
</view>
<view class="boxa" v-for="(item,index) in orderList" :key="index">
<view class="hei-title">{{item.licenseNum || ''}}</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 class="right-box">
<view class="janniu" v-if="gindex == 3" @click="getjiji(item.id)">
<text>还车</text>
</view>
</view>
</view>
<!-- <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>
</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';
export default {
data() {
return {
one: 0,
two: 0,
three: 0,
gindex: 9,
orderList: [],
licenseNum: '',
rescueStatus: '',
total: 0,
pageNum: 1, //第几页
pageSize: 10, //一页多少张
totalPages: 0, //总数
arrtap: [{
text: '扣车中',
id: 9
},
{
text: '已解扣',
id: 3
},
{
text: '已还车',
id: 8
},
],
arrbox: []
}
},
components: {
tabBar,
},
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">
.content {
width: 100%;
height: calc(100vh);
background-color: #F6F6F6;
box-sizing: border-box;
padding-top: 45px;
}
.top-icon {
box-sizing: border-box;
width: 100%;
padding: 5px 14px;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.dil {
background-color: #F6F6F6;
box-sizing: border-box;
padding: 15px 12px;
}
.h-text {
font-size: 14px;
font-weight: 400;
color: #999999;
}
.s-input {
width: 78%;
height: 30px;
background: #F3F3F3;
border-radius: 50px;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0px 10px;
input {
margin-left: 5px;
width: 80%;
font-size: 14px;
color: #999999;
}
}
.top-tap {
width: 100%;
background: white;
display: flex;
align-items: center;
box-sizing: border-box;
padding-top: 5px;
}
.tap-box {
width: 33%;
font-size: 15px;
font-weight: 400;
color: #666666;
text-align: center;
}
.gang {
width: 80%;
height: 5px;
margin: 0 auto;
border-radius: 12px;
background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
}
.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;
font-style: 18px;
font-weight: bold;
justify-content: center;
}
.boxa {
background: #FFFFFF;
border-radius: 10px;
box-sizing: border-box;
padding: 15px;
width: 95%;
border-radius: 10px;
margin: 10px auto;
}
.box-bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px auto;
}
.zc {
font-size: 14px;
font-weight: 400;
color: #363636
}
.hei-title {
font-size: 16px;
font-weight: 600;
color: #363636;
}
.yihang {
font-size: 14px;
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 {
width: 120px;
height: 30px;
background: #FF4D4F;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
.ques {
width: 90%;
margin: 100px auto;
}
</style>