1.01

pc/truck/detail.vue

@@ -1,9 +1,135 @@
 <template>
-    <div>详情</div>
+  <el-dialog
+    title="车辆管理 · 车辆详情"
+    :visible.sync="isShow"
+    width="60%"
+    :append-to-body="true"
+  >
+    <div class="order-detail" v-show="true||detail.orderId != ''">
+      <div flex="main:left" class="group">
+        <div class="w100">车牌号：{{ detail.carNumber }}</div>
+        <div>驾驶员：{{ driverList }}</div>
+      </div>
+      <div flex="main:left" class="group">
+        <div class="w100">行驶证资料 上传行驶证</div>
+        <div>号牌号码：鲁GJT00C</div>
+        <div>车辆类型：{{ detail.typeName }}</div>
+        <div class="w100">所有人：{{ detail.owner }}</div>
+        <div class="w100">住址：{{ detail.address }}</div>
+        <div>使用性质：{{ detail.useNature }}</div>
+        <div>品牌型号：XX牌XXXXXXXXXXX</div>
+        <div>车辆识别代号：{{ detail.vehicleIdCode }}</div>
+        <div>发动机号码：{{ detail.engineNumber }}</div>
+        <div>注册日期：{{ detail.registerDate }}</div>
+        <div>发证日期：{{ detail.issueDate }}</div>
+        <div>档案编号：{{ detail.fileNo }}</div>
+        <div>核定载人数：{{ detail.approvedCapacity }}人</div>
+        <div>总质量：{{ detail.grossMass }}</div>
+        <div>整备质量：{{ detail.unladenMass }} kg</div>
+        <div>核定载质量：{{ detail.approvedLoad }}</div>
+        <div>外廓尺寸：{{ detail.overallDimension }}</div>
+        <div>准牵引总质量：{{ detail.tractionMass }} kg</div>
+        <div>检验记录（能源类型）：{{ detail.energyType }}</div>
+        <div>
+          <div>行驶证第一页：</div>
+          <img :src="'https://dwx.auyen.com/'+detail.faceUrl"/>
+        </div>
+        <div>行驶证第二页：</div>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 <script>
+import { $truckFindById } from '@/service/strategy'
 export default {
-  name: 'truckDetail'
-
+  name: 'truckDetail',
+  data() {
+    return {
+      isShow: false,
+      detail: {}
+    }
+  },
+  methods: {
+    open(args) {
+      this.isShow = true
+      $truckFindById({ id: args.truckId }).then(res => {
+        this.detail = res.data
+      })
+    }
+  }
 }
 </script>
+<style lang="scss" scoped>
+.group {
+  width: 100%;
+  flex-wrap: wrap;
+  border-bottom: 2px solid #eee;
+  padding: 20px;
+  padding-top: 10px;
+
+  div {
+    margin-top: 10px;
+    width: 50%;
+
+    // 偶数
+    &:nth-child(even).hidden {
+      width: 100%;
+    }
+  }
+
+  span {
+    margin-left: 10px;
+  }
+
+  div:empty,
+  span:empty,
+  .hidden {
+    width: 1px;
+    height: 0;
+    margin: 0;
+    padding: 0 !important;
+    visibility: hidden;
+  }
+
+  .detail {
+    width: 100%;
+    padding: 10px 0;
+    border-top: 1px solid #eee;
+    flex-wrap: wrap;
+
+    .rd {
+      margin: 0;
+      margin-bottom: 4px;
+      & div {
+        margin: 0;
+      }
+      .desc {
+        font-size: 12px;
+        margin-left: 10px;
+      }
+      // &::before {
+      //   content: "|";
+      //   margin: 0 10px;
+      // }
+
+      // &:first-child::before {
+      //   content: "";
+      //   margin: 0;
+      // }
+    }
+  }
+
+  .nm {
+    margin: 0;
+  }
+
+  .w100 {
+    width: 100%;
+  }
+}
+
+.btn {
+  margin-left: 10px;
+  padding: 0;
+}
+</style>