申请认证

src/components/ImgUploader.vue

@@ -0,0 +1,75 @@
+<template>
+    <van-uploader :file-list="fileList" max-count="1" :after-read="afterRead" @delete="deleteImg" preview-size="160" />
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            fileList: []
+        };
+    },
+    created() {
+        this.setFile(this.value);
+    },
+    methods: {
+        setFile(value) {
+            if (value) {
+                this.fileList = [{ url: value }];
+            } else {
+                this.fileList = [];
+            }
+        },
+        afterRead(file) {
+            this.$http.uploadFile(file.path).then(res => {
+                let fileList = [];
+                fileList.push({ ...file, url: res });
+                this.fileList = fileList;
+                this.$emit('input', res);
+            });
+        },
+        deleteImg() {
+            this.fileList = [];
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .van-uploader {
+    .van-uploader__upload,
+    .van-uploader__preview-image {
+        border-radius: 12px;
+    }
+
+    .van-uploader__wrapper {
+        padding-top: 10px;
+    }
+
+    .van-uploader__preview-delete {
+        width: 20px;
+        height: 20px;
+        border-radius: 100%;
+        background-color: @prim;
+        .flex();
+        justify-content: center;
+        right: -6px;
+        top: -8px;
+    }
+
+    .van-uploader__preview-delete-icon {
+        position: relative;
+        top: auto;
+        right: auto;
+        transform: none;
+        font-size: 14px;
+        font-weight: bold;
+    }
+}
+</style>

src/pages/store/apply.vue

@@ -45,11 +45,11 @@
             />
 
             <van-cell title="身份证照片（正面照）">
-                <van-uploader :file-list="form.idimgs" />
+                <img-uploader v-model="form.idImg"></img-uploader>
             </van-cell>
 
             <van-cell title="营业执照" :border="false">
-                <van-uploader :file-list="form.icImgs" />
+                <img-uploader v-model="form.icImg"></img-uploader>
             </van-cell>
 
             <div class="btn">
@@ -60,12 +60,14 @@
 </template>
 
 <script>
+import ImgUploader from '../../components/ImgUploader.vue';
 export default {
+    components: { ImgUploader },
     data() {
         return {
             form: {
-                idimgs: [],
-                icImgs: []
+                idImg: '',
+                icImg: ''
             }
         };
     }
@@ -115,12 +117,6 @@ export default {
         text-align: left;
     }
 
-    .van-uploader__upload {
-        width: 160px !important;
-        height: 160px !important;
-        border-radius: 12px;
-    }
-
     &::after {
         left: 100px !important;
     }