lanan-app/pages/Detain/Detain.vue

335 lines
6.5 KiB
Vue
Raw Normal View History

2024-08-20 20:02:05 +08:00
<!-- 选择页 -->
<template>
<view class="content">
<view class="bil">
<view class="c-top">
<view class="top-icon" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
<view class="">返回</view>
</view>
<view class="">扣车</view>
<view style="width: 20%; height: 100%; "></view>
</view>
<view class="input-box">
<view class="hui-input">
<input type="text" placeholder="输入姓名/车牌号/手机号" v-model="connectionName">
</view>
<view class="anniu" @click="getlist">
<text>搜索</text>
</view>
</view>
<view class="tap-lan">
<view class="tap-box" v-for="(item,index) in kolist" :key="index" @click="iditem(item.id)">
<view class="">{{item.text}}</view>
<view class="gang" v-if="tabid == item.id"></view>
</view>
</view>
</view>
<view class="dadahuii">
<view class="mubu">
<view class="ques" v-if="listarr.length== 0 ">
<image src="../../static/quesheng.png" mode=""></image>
</view>
<view class="boxa" v-for="(item,index) in listarr" :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="item.rescueStatus < 6" @click="dialogToggle(item.id)">
<text>解扣</text>
</view>
</view>
</view>
</view>
</view>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确认解扣吗" @confirm="dialogConfirm"
@close="dialogClose"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import request from '../../utils/request';
import tabBar from'../../components/tabBar/tabBar.vue'
export default{
data(){
return{
msgType:'',
tabid:1,
pageNum: 1,//第几页
pageSize: 10,//一页多少张
totalPages: 0,//总数
jkid:'',
connectionName:'',
kolist:[
{text:'扣车中',id:1},
{text:'已解扣',id:2},
],
listarr:[]
}
},
components:{
tabBar,
},
onLoad(option) {
this.isAppointment = option.isAppointment
},
onShow() {
this.getlist()
},
onReachBottom() {
console.log('执行了');
if (this.pageNum >= this.totalPages) {
uni.showToast({
title: '没有下一页数据',
icon: 'none'
})
} else {
this.pageNum++
this.getlist()
}
},
methods:{
getlist(){
let data = {
connectionName:this.connectionName,
rescueStatus:this.tabid,
pageSize:this.pageSize,
pageNum:this.pageNum,
}
request({
url: '/app/rescueInfo/getKcList',
method: 'get',
params:data
}).then((res)=>{
console.log('扣车',res);
if(res.code == 200 ){
if (this.pageNum != 1) {
this.listarr = this.listarr.concat(res.rows)
}else{
this.listarr = res.rows
}
let total = res.total
this.totalPages = Math.ceil(total / this.pageSize);
}
})
},
dialogToggle(id) {
this.jkid = id
this.$refs.alertDialog.open()
},
dialogConfirm(){
console.log('ok');
this.jiekou(this.jkid )
this.getlist()
this.$refs.alertDialog.close()
},
jiekou(id){
let data = {
rescueId:id,
}
request({
url: '/app/rescueInfo/openKc',
method: 'post',
params:data
}).then((res)=>{
console.log('jie',res);
if(res.code == 200 ){
this.getlist()
}
})
},
iditem(id){
this.listarr = []
this.tabid = id
this.getlist()
},
getback(){
uni.navigateBack()
},
getsx(id){
uni.navigateTo({
url:'/pages/rescue/initiate?id='+id+'&isAppointment='+this.isAppointment
})
},
goindex(){
uni.navigateTo({
url:'/pages/index/index'
})
}
}
}
</script>
<style scoped lang="scss">
.content{
width: 100%;
background: #EEEEEE;
}
.mubu{
width: 100%;
background: #EEEEEE;
}
.bil{
width: 100%;
background-color: white;
box-sizing: border-box;
padding: 18px;
padding-top: 50px;
padding-bottom: 0px;
}
.top-icon{
display: flex;
color: #999999;
width: 20%;
height: 100%;
}
.c-top{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-white{
color: #333333;
font-size: 19px;
font-weight: bold;
// margin-top: 40px;
}
.input-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.hui-input{
width: 75%;
height: 40px;
background: #EEEEEE;
border-radius: 31px;
box-sizing: border-box;
padding: 10px;
input{
width: 100%;
}
}
.anniu{
width: 80px;
height: 40px;
background: linear-gradient(262deg, #0163A8 0%, #25499C 100%);
border-radius: 31px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: white;
}
.tap-lan{
width: 100%;
height: 40px;
display: flex;
margin-top: 10px;
}
.tap-box{
width: 20%;
text-align: center;
}
.gang{
width: 50px;
height: 5px;
background: #4B67BA;
border-radius: 4px;
margin: 5px auto;
}
.dadahuii{
width: 100%;
background: #EEEEEE;
height: calc(80vh);
}
.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>