Files
supplier-dispatch-h5/src/views/index/vehicleManage.vue

195 lines
4.7 KiB
Vue

<template>
<div class="wrap" @scroll="handleScroll">
<div class="navBar">
<van-nav-bar
title="车辆管理"
left-arrow
left-arrow-color="#FFFFFF"
:border="false"
:fixed="true"
:safe-area-inset-top="true"
@click-left="goBack"
>
<template slot="right">
<div class="rightWrap" @click="goPage('vehicleAdd')">
<img src="@/assets/addImg.png" />
<span class="addTxt">添加</span>
</div>
</template>
</van-nav-bar>
</div>
<div class="carItem" v-for="(item,index) in vehicleList" :key="index">
<div class="carCode">
<div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
<div class="twoBtn">
<button class="del" @click="deleteItem(item.vehicleId)">删除</button>
<button class="revise" @click="goPage('vehicleAdd',{ id: item.vehicleId })">修改</button>
</div>
</div>
<div class="carType">{{ item.serviceName }}</div>
<div class="juhe">
<span class="zdJuhe">是否参与中道聚合: </span>
<span :class="item.hasPolymerization.code == 0 ? 'isYes' :'isNo'">{{item.hasPolymerization.label}}</span>
</div>
</div>
<van-dialog v-model="show" title="确定删除吗" show-cancel-button @confirm="handleConfirm"></van-dialog>
<div v-if="loading">加载中...</div>
</div>
</template>
<script>
import { myMixins} from "@/utils/myMixins";
import {supplierVehicleList,deleteVehicle} from "@/api/mine"
export default {
name: "vehicleManage",
mixins:[myMixins],
data(){
return{
vehicleList:[],
show:false,
id:'',
pageNum:1,
pageSize:10,
total:'',
loading:false,
items: [], // 当前页数
}
},
mounted() {
this.getVehicleList();
},
methods:{
async getVehicleList(){
let result = await supplierVehicleList({
pageNum:this.pageNum,
pageSize:this.pageSize
})
if(result.code === 200){
this.total=result.total
if(this.pageNum == 1){// 第一页直接赋值
this.vehicleList=result.data;
}else{// 第二页数据拼接
let preList = this.vehicleList;
let arr = result.data;
this.vehicleList = preList.concat(arr)
}
}
},
deleteItem(id){//删除车辆
this.show=true
this.id=id
},
async handleConfirm(){//调删除车辆接口
let result= await deleteVehicle({
vehicleId:this.id
})
if(result.code === 200){
this.$toast('删除成功');
await this.getVehicleList();
}else{
this.$toast(result.msg)
}
},
async handleScroll(){
let num = Math.ceil( this.total / 10)
if(num <= this.pageNum){
// console.log("不在加载数据")
}else{
this.pageNum++;
await this.getVehicleList()
// console.log("111111111111")
}
},
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
overflow-y: auto;
@include wh(100%,calc(100% - 46px));
box-sizing: border-box;
padding: 13px 13px 0;
}
.navBar{
margin-bottom: 46px;
//height: 46px;
.rightWrap{
width: 50px;
height: 20px;
border-radius: 10px;
opacity: 0.7;
border: 1px solid #FFFFFF;
@include flexCenter;
justify-content: center;
img{
@include widHeiMar(9px,8px,4px);
}
.addTxt{
@include fontWeightSize(bolder,11px);
opacity: .7;
color: #FFFFFF;
}
}
}
.carItem{
//position: relative;
// z-index: 11;
@include wh(100%,86px);
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
border-radius: 6px;
box-sizing: border-box;
padding: 11px 13px 11px 15px;
margin-bottom: 10px;
@include flexBetween;
.carCode{
display: flex;
justify-content: space-between;
.codeLeft{
@include fontWeightSize(bold,14px)
}
.twoBtn{
button{
border: none;
width: 48px;
@include all-height(20px);
border-radius: 3px;
@include fontWeightSize(bold,12px)
}
.del{
border: 1px solid #DDDDDD;
background-color: #FFFFFF;
}
.revise{
color: #FFFFFF;
margin-left: 15px;
background: #354D93;
}
}
}
.carType{
width: 95%;
white-space: nowrap; // 防止文本换行
text-overflow: ellipsis; // 使用省略号表示超出部分
overflow: hidden; // 隐藏超出容器宽度的内容
}
.carType,.zdJuhe{
opacity: .7;
@include fontWeightSize(400,12px)
}
.isYes{
color: #09B820;
@include fontWeightSize(400,12px);
}
.isNo{
color: #FF0000;
@include fontWeightSize(400,12px);
}
}
</style>