story#7189,回程车小程序司机端-迁移认证页面

src/views/rvDriverAuthentication/component/auditItem.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="audit_item flex flex_between">
+    <div class="item_left flex">
+      <img class="main_img mr15" :src="url" />
+      <div class="flex_fit">
+        <div class="main_title active">{{title}}</div>
+        <div class="main_tip">{{tip}}</div>
+      </div>
+    </div>
+    <div class="pass_item" v-if="pass" @click="showDetail">
+      <span>{{status}}</span>
+      <img v-if="title != '审核信息'" class="arrow_icon" src="@/assets/authentication/arrow_right.png" />
+    </div>
+    <div class="uploadBtn" :class="{'activeBtn': currentClass }"
+          v-else-if="!pass && buttonHide" @click="uploadHandler">{{buttonTitle}}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "auditItem",
+    data() {
+      return {
+      }
+    },
+    methods: {
+      uploadHandler(){
+        if( !this.pass && this.currentClass ) {
+          this.$emit('upload')
+        }
+      },
+      showDetail() {
+        this.$emit('detail')
+      }
+    },
+    props: {
+      buttonHide: {
+        type: Boolean,
+        default: true
+      },
+      status: {
+        type: String,
+        default: '查看'
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      tip: {
+        type: String,
+        default: ''
+      },
+      url: {
+        type: String,
+        default: require('@/assets/authentication/aduit_icon1.png')
+      },
+      pass: {
+        type: Boolean,
+        default: false
+      },
+      currentClass: {
+        type: Boolean,
+        default: false
+      },
+      buttonTitle: {
+        type: String,
+        default: '上传'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .audit_item {
+    width: 100%;
+    padding: 20px 0;
+    box-sizing: border-box;
+    position: relative;
+    .item_left {
+      flex: 1;
+      .main_img {
+        width: 36px;
+        height: 36px;
+      }
+      .flex_fit {
+        flex: 1;
+      }
+      .main_title {
+        font-size: 17px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #33495E;
+      }
+      .active {
+        color: #33495E;
+      }
+      .main_tip {
+        font-size: 14px;
+        font-weight: 500;
+        color: #33495E;
+        line-height: 20px;
+        margin-right: 5px;
+      }
+    }
+    .uploadBtn {
+      width: 68px;
+      height: 31px;
+      background: rgba($color: #5B739D, $alpha: 0.24);
+      color: #fff;
+      font-size: 13px;
+      border-radius: 4px;
+      line-height: 31px;
+      text-align: center;
+    }
+    .activeBtn {
+      background: #3364B7;
+    }
+    .pass_item {
+      font-size: 13px;
+      color: rgba($color: #000, $alpha: 0.59);
+      .arrow_icon {
+        width: 8px;
+        height: 12px;
+        vertical-align: sub;
+        margin-left: 5px;
+      }
+    }
+
+
+  }
+</style>