195 lines
4.7 KiB
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> |