task#15638,电瓶详情页面和接口对接，样式调整

src/api/order.js

@@ -86,3 +86,12 @@ export function batteryCountList(){
     // data
   })
 }
+// 电瓶详情
+export function batteryDetailList (data){
+  return request({
+    url:'/supplierAppV2/dispatchApp/battery/batteryDetailList',
+    method:'POST',
+    contentType:'application/json',
+    data
+  })
+}

src/router/index.js

@@ -223,6 +223,14 @@ const routes = [
             title:'电瓶进销存'
         }
     },
+    {
+        path: '/batteryDetail',
+        name: 'batteryDetail',
+        component:()=>import('@/views/battery/batteryDetail.vue'),
+        meta: {
+            title:'电瓶详情'
+        }
+    },
     ...kpiRouter,
   ]
 

src/views/battery/batteryDetail.vue

@@ -0,0 +1,138 @@
+<template>
+  <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="h5GoBack"
+      > </van-nav-bar>
+    </div>
+    <div class="container" v-if="batteryDetailList && batteryDetailList.length>0">
+      <div class="itemWrap" v-for="(item,index) in batteryDetailList" :key="index">
+        <div>
+          <span class="halfOpci">设备号</span>
+          <span class="allOpci">{{ item.productNo }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">品牌</span>
+          <span class="allOpci">{{ item.brand }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">型号</span>
+          <span class="allOpci">{{ item.model }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">售卖人员</span>
+          <span class="allOpci">{{ item.saleName }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">售卖时间</span>
+          <span class="allOpci">{{ item.createTime }}</span>
+        </div>
+      </div></div>
+  </div>
+</template>
+
+<script>
+
+import {myMixins} from "@/utils/myMixins"
+import {batteryDetailList} from  "@/api/order"
+export default {
+  name: "batteryDetail",
+  mixins:[myMixins],
+  data(){
+    return{
+      batteryDetailList:[],
+      isLoading: false,
+      loading: false,
+      brand: '',
+      model:'',
+    }
+  },
+  async mounted() {
+    this.brand = this.$route.params.brand;
+    this.model = this.$route.params.model;
+    await this.getDetailList()
+  },
+  methods:{
+    async getDetailList(){
+      let res = await batteryDetailList({
+        brand:this.brand,
+        model:this.model,
+      })
+      this.batteryDetailList=res.data
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/mixin.scss';
+@import "@/styles/common.scss";
+
+.wrap {
+  background: #F4F5F7;
+  @include wh(100%, 100%);
+}
+.navBar{
+  margin-bottom: 46px;
+  .rightWrap{
+    @include wh(50px,20px);
+    border-radius: 10px;
+    opacity: 0.7;
+    border: 1px solid #FFFFFF;
+    @include flexTwoCenter;
+    img{
+      @include widHeiMar(9px,8px,4px);
+    }
+    .addTxt{
+      @include fontWeightSize(bolder,11px);
+      @include colorOpa( #FFFFFF,0.7);
+    }
+  }
+}
+.container{
+  @include wh(100%, calc(100% - 56px));
+  overflow-y: auto;
+  @include sizingPadding(13px,13px);
+}
+.itemWrap {
+  @include wh(100%, 104px);
+  @include radiusSizing(6px);
+  @include fontWeightSize(400, 12px);
+  @include flexBetween;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
+  margin-bottom: 10px;
+  padding: 11px 13px 9px 15px;
+  position: relative;
+  .halfOpci {
+    display: inline-block;
+    width: 60px;
+    opacity: .5;
+    margin-right: 5px;
+  }
+  .allOpci {
+    opacity: 1;
+  }
+  .statusNo {
+    color: #FF0000;
+  }
+  .statusYes {
+    color: #09B820
+  }
+  .img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 35%;
+    cursor: pointer;
+  }
+}
+
+</style>

src/views/battery/batteryList.vue

@@ -10,52 +10,37 @@
           :safe-area-inset-top="true"
           @click-left="goBack"
       >
-<!--        <template slot="right" v-if="permissonList.includes('driverAddBtn')">
-          <div class="rightWrap" @click="addDriver" >
-            <img src="@/assets/addImg.png" />
-            <span class="addTxt">添加</span>
-          </div>
-        </template>-->
       </van-nav-bar>
     </div>
-<!--    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-      <van-list
-          v-model="loading"
-          :finished="finished"
-          finished-text="没有更多了"
-          @load="onLoad"
-      >-->
-        <div class="itemWrap" v-for="(item,index) in batteryList" :key="index">
-          <div class="name-status">
-            <div class="namephone">{{ item.driverName }} / {{ item.driverPhone }}</div>
-            <div class="twoBtn">
-              <button v-if="permissonList.includes('driverModifyBtn')" class="del" @click="handleStatus(item)">{{ item.states?.label == '启用'  ? '停用' : '启用' }}</button>
-              <button v-if="permissonList.includes('driverModifyBtn')" class="revise" @click="updateDriver(item)">修改</button>
-            </div>
-          </div>
-          <div class="" style="display: flex">
-            <div class="sex" style="margin-right: 40px">
-              <span class="halfOpci">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
-              <span class="allOpci">{{item.sex?.label}}</span>
-            </div>
-            <div class="carType">
-              <span class="halfOpci">准驾车型:</span>
-              <span class="allOpci">{{item.drivingModel}}</span>
-            </div>
-          </div>
-          <div>
-            <span class="halfOpci">身份证号:</span>
-            <span class="allOpci">{{ item.identityCardNumber }}</span>
-          </div>
-          <div>
-            <span class="halfOpci">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:</span>
-            <span :class="item.states?.code == 1 ? 'statusYes' : 'statusNo'">{{ item.states?.label }}</span>
-          </div>
+    <van-field class="input" right-icon="search" v-model="keyword" placeholder="请输入品牌或型号"   @input="filterBatteryList"/>
+    <div class="container" v-if="batteryList && batteryList.length>0">
+      <div class="itemWrap" v-for="(item,index) in batteryList" :key="index">
+        <div>
+          <span class="halfOpci">品牌</span>
+          <span class="allOpci">{{ item.brand }}</span>
         </div>
-<!--
-      </van-list>
-  </van-pull-refresh>-->
-
+        <div>
+          <span class="halfOpci">型号</span>
+          <span class="allOpci">{{ item.model }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">总量</span>
+          <span class="allOpci">{{ item.totalNum }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">库存数量</span>
+          <span class="allOpci">{{ item.stockNum }}</span>
+        </div>
+        <div>
+          <span class="halfOpci">已售数量</span>
+          <span class="allOpci">{{ item.sellNum }}</span>
+        </div>
+        <img @click="goBatteryDetail(item)" class="img" src="@/assets/arrow_rht.png" />
+      </div>
+    </div>
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
   </div>
 </template>
 
@@ -68,28 +53,38 @@ export default {
   mixins:[myMixins],
   data(){
     return{
-      pageNum:1,
-      total:'',
       batteryList:[],
-      states:'',
-      supplierType:'',
-      count: 0,
       isLoading: false,
-      loading: false,
-      finished: false,
-      permissonList:[],
-      
+      keyword:'',
     }
   },
+  computed:{
+    show() {
+      return (this.batteryList.length < 0 || this.batteryList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
   mounted() {
-    const urlParams = new URLSearchParams(window.location.search);
-    console.log("urlParams",urlParams)
     this.getList()
   },
   methods:{
+    async filterBatteryList(){
+      await this.getList()
+      this.batteryList = this.batteryList.filter(item =>
+          item.brand.includes(this.keyword) || item.model.includes(this.keyword)
+      );
+    },
+    goBatteryDetail(item){//电瓶详情
+      this.$router.push({
+        name: "batteryDetail",
+        params: {
+          brand: item.brand,
+          model: item.model,
+        }
+      })
+    },
     async getList(){
       let res = await batteryCountList()
-      console.log("res",res)
+      this.batteryList=res.data
     },
   }
 }
@@ -101,9 +96,7 @@ export default {
 
 .wrap {
   background: #F4F5F7;
-  @include sizingPadding(13px,13px);
   @include wh(100%, 100%);
-  overflow-y: auto;
 }
 .navBar{
   margin-bottom: 46px;
@@ -122,6 +115,15 @@ export default {
     }
   }
 }
+.input{
+  //@include sizingPadding(13px,13px);
+  //margin: 13px 0;
+}
+.container{
+  @include sizingPadding(13px,13px);
+  overflow-y: auto;
+  @include wh(100%, calc(100% - 96px));
+}
 
 .itemWrap {
   @include wh(100%, 104px);
@@ -132,7 +134,11 @@ export default {
   box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
   margin-bottom: 10px;
   padding: 11px 13px 9px 15px;
+  position: relative;
+  //margin-top: 10px;
   .halfOpci {
+    display: inline-block;
+    width: 60px;
     opacity: .5;
     margin-right: 5px;
   }
@@ -145,33 +151,21 @@ export default {
   .statusYes {
     color: #09B820
   }
+  .img{
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 35%;
+    cursor: pointer;
+  }
 }
-
-.name-status {
-  @include flexColBet;
-  .namephone {
-    @include fontWeightSize(bold, 14px)
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
   }
-
-  .twoBtn {
-    display: flex;
-    button {
-      border: none;
-      padding: 4px  8px;
-      border-radius: 3px;
-      @include flexTwoCenter;
-      @include fontWeightSize(bold, 12px)
-    }
-    .del {
-      border: 1px solid #DDDDDD;
-      background-color: #FFFFFF;
-    }
-
-    .revise {
-      @include bgFontColor( #FFFFFF,#354D93);
-      margin-left: 15px;
-    }
-  }
-
 }
 </style>