完善车辆管理模块

src/views/index/vehicleManage.vue

@@ -1,39 +1,134 @@
 <template>
-<div class="wrap">
-  <div class="carItem" v-for="(item,index) in 3" :key="index">
+<div class="wrap"  >
+  <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">苏AB6768 / 拖车</div>
+      <div class="codeLeft">{{item.plateNumber}} / {{item.vehicleTypeString}}</div>
       <div class="twoBtn">
-        <button class="del">删除</button>
-        <button class="revise" @click="goPage('vehicleAdd')">修改</button>
+        <button class="del" @click="deleteItem(item.vehicleId)">删除</button>
+        <button class="revise" @click="goPage('vehicleAdd',{ id: item.vehicleId })">修改</button>
       </div>
     </div>
-    <div class="carType">事故--大型拖车,事故--小型拖车,事故--平板拖车....</div>
+    <div class="carType">{{ item.serviceName }}</div>
     <div class="juhe">
       <span class="zdJuhe">是否参与中道聚合:        </span>
-      <span class="isZd isYes">是</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>
 </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:'',
+    }
+  },
+  mounted() {
+    this.getVehicleList();
+  },
+  methods:{
+      async getVehicleList(){
+        let result = await supplierVehicleList({
+          pageNum:this.pageNum,
+          pageSize:this.pageSize
+        })
+        if(result.code === 200){
+          this.vehicleList=result.data;
+          this.total=result.total
+        }
+      },
+    deleteItem(id){//删除车辆
+        this.show=true
+        this.id=id
+    },
+    addVehicle(){//添加车辆
+      console.log("添加")
+
+    },
+   async handleConfirm(){//调删除车辆接口
+      let result= await deleteVehicle({
+        vehicleId:this.id
+      })
+     if(result.code === 200){
+       this.$toast('删除成功');
+        await this.getVehicleList();
+     }
+    },
+    async handleScroll(){
+        this.pageNum += 1;
+        let res= await this.getVehicleList();
+        let newData=res.data
+        this.vehicleList=[...this.vehicleList,...newData]
+
+      console.log("滑动")
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
 .wrap{
-  @include wh(100%,100%);
+  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);
@@ -46,7 +141,7 @@ export default {
     display: flex;
     justify-content: space-between;
     .codeLeft{
-      @include fontWeightSize(500,14px)
+      @include fontWeightSize(bold,14px)
     }
     .twoBtn{
       button{
@@ -54,7 +149,7 @@ export default {
         width: 48px;
         @include all-height(20px);
         border-radius: 3px;
-        @include fontWeightSize(500,12px)
+        @include fontWeightSize(bold,12px)
       }
       .del{
         border: 1px solid #DDDDDD;
@@ -67,18 +162,23 @@ export default {
       }
     }
   }
+  .carType{
+    width: 95%;
+    white-space: nowrap; // 防止文本换行
+    text-overflow: ellipsis; // 使用省略号表示超出部分
+    overflow: hidden; // 隐藏超出容器宽度的内容
+  }
   .carType,.zdJuhe{
     opacity: .7;
     @include fontWeightSize(400,12px)
   }
-  .isZd{
-    @include fontWeightSize(400,12px);
-  }
   .isYes{
     color: #09B820;
+    @include fontWeightSize(400,12px);
   }
   .isNo{
     color: #FF0000;
+    @include fontWeightSize(400,12px);
   }
 }
 </style>