文档上传插件

@@ -301,6 +301,13 @@ input::-webkit-search-cancel-button {
   opacity: 1;
 }
 
+
+::-webkit-scrollbar{
+  width: 0px;
+  height: 0px;
+  display: none;
+}
+
 input::-webkit-input-placeholder {
   color: $cGray2;
 }

@@ -62,6 +62,8 @@ module.exports = {
   getDownloadPath : "/pingan_hklife_webapi/policy/getDownloadPath",
   // 下载电子保单
   downloadPolicy : "/pingan_hklife_webapi/policy/d",
+  // 上传电子文档
+  uploadClarmsImage : "/pingan_hklife_webapi/policy/clarmsUpload",
 
 
   // cms相关

@@ -67,7 +67,8 @@ let encryptPattern = [
 ]
 
 let encryptWhileList = [
-	"/pingan_hklife_webapi/policy/idPicUpload"
+	"/pingan_hklife_webapi/policy/idPicUpload",
+	"/pingan_hklife_webapi/policy/clarmsUpload"
 ]
 
 // 请求拦截器

+import api from '@/api/api'
+import {
+    httpGet,
+    httpPost,
+    formdata
+} from '@/api/fetch-api.js'
+
+import Vue from 'vue';
+import { Loading } from 'vant';
+Vue.use(Loading);
+
+export default {
+
+    props: {
+        // 是否显示组件
+        options: {
+            type: Object,
+            default() {
+                return {
+                    // 名称
+                    name: "",
+                    // 图标编号
+                    icon: "",
+                    // 影像名称
+                    imageFileName: "",
+                    // 主单证类型
+                    imageMainTypeID: "",
+                    // 副单证类型
+                    imageTypeID: "",
+                };
+            }
+        },
+        icon: {
+            type: String,
+            default: ""
+        }
+    },
+    data() {
+        return {
+            uploadFiles: 0,
+            images: [],
+        }
+    },
+    components: {
+    },
+    computed: {
+        uploading() {
+            let len = this.images.length;
+            if (len < 0) {
+                return false;
+            }
+            for (let index = 0; index < len; index++) {
+                let d = this.images[index] || null;
+                if (!d) {
+                    continue;
+                }
+                if (d.intervial) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        i18n() {
+            return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
+        },
+    },
+    methods: {
+        initData() {
+
+        },
+        selectMutilFile() {
+            if (this.uploading) {
+                return;
+            }
+
+            let _this = this;
+            let input = document.createElement("input");
+            input.setAttribute("type", "file");
+            input.setAttribute("multiple", "multiple");
+            input.setAttribute("accept", "image/*");
+            input.onchange = function (val) {
+                let position = _this.images.length;
+                for (let index = 0; index < input.files.length; index++) {
+                    setTimeout(function () {
+                        _this.initFileUpload(input.files[index], position + index);
+                    }, index * 50);
+                };
+            };
+            input.click();
+        },
+        initFileUpload(file, index) {
+            let _this = this;
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                let d = {
+                    file: file,
+                    data: reader.result,
+                    cacheKey: "",
+                    showMask: false,
+                    key: _this.randomAesKey(),
+                    intervial: false,
+                    tips: "",
+                    err: ""
+                };
+                _this.$set(_this.images, index, d);
+                _this.handleFileUpload(d, index);
+            }
+            reader.readAsDataURL(file);
+        },
+        handleFileUpload(item, index) {
+            item.intervial = setInterval(function () {
+                item.tips = item.tips + ".";
+                if (item.tips.length > 3) {
+                    item.tips = "";
+                }
+            }, 1000);
+            this.$set(this, "images", this.images);
+            let param = {
+                file: item.file,
+                key: item.key
+            }
+            formdata({ url: api.uploadClarmsImage, data: param }).then(res => {
+                item.cacheKey = res.content.id
+                clearInterval(item.intervial);
+                item.intervial = false;
+                this.$set(this, "images", this.images);
+                this.refreshUploadNumber();
+            }).catch(err => {
+                clearInterval(item.intervial);
+                item.intervial = false;
+                item.err = "失败";
+                this.$set(this, "images", this.images);
+            });
+        },
+        refreshUploadNumber() {
+            let d = this.images.length;
+            let number = 0;
+            for (let index = 0; index < d; index++) {
+                let v = this.images[index] || null;
+                if (v && v.cacheKey) {
+                    number++;
+                }
+            }
+            this.uploadFiles = number;
+            this.emitResult();
+        },
+        onOverHandler(event, item, index) {
+            item.showMask = true;
+            event.preventDefault();
+        },
+        onOutHandler(event, item, index) {
+            item.showMask = false;
+            event.preventDefault();
+        },
+        removeItem(index) {
+            let images = JSON.parse(JSON.stringify(this.images));
+            images.splice(index, 1);
+            this.$set(this, "images", images);
+            this.refreshUploadNumber();
+        },
+        randomAesKey() {
+            let chars = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
+            let res = "";
+            for (let i = 0; i < 16; i++) {
+                let id = Math.ceil(Math.random() * (chars.length - 1));
+                res += chars[id];
+            }
+            return res;
+        },
+        emitResult() {
+            if (this.images.length == 0) {
+                this.$emit("success", []);
+                return;
+            }
+            if (this.uploading) {
+                return;
+            }
+            let result = [];
+            let len = this.images.length;
+            if (len < 0) {
+                return false;
+            }
+            for (let index = 0; index < len; index++) {
+                let d = this.images[index] || null;
+                if (!d || !d.cacheKey) {
+                    continue;
+                }
+                // 结果
+                let res = {
+                    seqNumber: index + 1,
+                    cloudStorageID: d.cacheKey,
+                    imageFileName: this.options.imageFileName,
+                    imageMainTypeID: this.options.imageMainTypeID,
+                    imageTypeID: this.options.imageTypeID
+                }
+                result.push(res);
+            }
+            this.$emit("success", result);
+        }
+    },
+    watch: {
+
+    },
+    mounted() {
+        this.initData();
+    },
+    created() { }
+}

+@import '@/styles/_support';
+
+
+.clarms-container {
+    box-sizing:border-box; 
+    padding:.166667rem;
+    border-radius: .416667rem;
+    background-image: linear-gradient(to right , #ffb31d, #f15907) ;
+
+    .clarms-box { 
+        width:100%; 
+        height:100%; 
+        border-radius: .416667rem;
+        background:#fff; 
+        padding: 1.666667rem 2.5rem 0 2.5rem;
+
+        .clarms-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1.666667rem;
+    
+            .clarms-header-2 {
+                flex-grow: 1;
+                display: flex;
+                align-items: center;
+            }
+
+            .clarms-icon {
+                width: 4.166667rem;
+            }
+        }
+    
+        .clarms-title-container {
+            margin-left: 2.5rem ;
+            flex-grow: 1;
+            width: 100%;
+
+            .clarmsActivty {
+                color: #ffb31d !important;
+            }
+
+            .clarms-t1 {
+                font-size: 2rem;
+                color: #f15907;
+                letter-spacing: .166667rem;
+            }
+
+            .clarms-t2 {
+                color: #58595b;
+                letter-spacing: .166667rem;
+            }
+        }
+
+        hr {
+            margin: 0 .833333rem 1.666667rem .833333rem;
+            border-top: 1px solid #dddede ;
+        }
+
+        .clarms-btn {
+            background: url(~@/assets/images/clarms/button.png);
+            background-size: 100% 100%;
+            width: 10.583333rem !important;
+            height: 3rem;
+    
+            text-align: center;
+            line-height: 3rem;
+            color: white;
+            letter-spacing: .166667rem ;
+            font-size: 1.166667rem;
+            cursor: pointer;
+        }
+
+        .clarms-img-group {
+            display: flex;
+            flex-wrap: wrap;
+
+            .clarms-img-item-plugin {
+                cursor: pointer;
+                margin-right: .833333rem;
+                margin-bottom:  .833333rem;
+                width: 5.833333rem;
+                height: 5.833333rem;
+
+                .clarms-img-item {
+                    position:  relative;
+                    width: 5.833333rem;
+                    height: 5.833333rem;
+
+                    .clarms-img-cont {
+                        width: 5.833333rem;
+                        height: 5.833333rem;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+
+                    .clarms-img-mask {
+                        width: 5.833333rem;
+                        height: 5.833333rem;
+                        text-align: center;
+                        line-height: 5.833333rem;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                        background-color: rgba($color: #000000, $alpha: .1);
+
+                        img {
+                            width: 2.5rem ;
+                            height:  2.5rem ;
+                        }
+                    }
+                }
+
+                .clarms-upload-tips {
+                    font-size: 1rem ;
+                    color: #58595b;
+                    text-align: center;
+                }
+            }
+        }
+    }
+    
+    .clarms-empty-line {
+        height: .833333rem;
+    }
+}
+
+
+@media (max-width: 800px) {
+    
+    .clarms-container {
+        .clarms-box { 
+            .clarms-header {
+                flex-direction: column;
+
+                .clarms-header-2{
+                    align-self: flex-start;
+                }
+
+                .clarms-btn {
+                    align-self: flex-end;
+                    margin-top: .833333rem;
+                }
+                .clarms-icon {
+                    width: 4.166667rem;
+                }
+            }
+            .clarms-title-container {
+                margin-top: .833333rem;
+                margin-left: .833333rem;
+            }
+        }
+    }
+}
+
+@media (max-width: 600px) {
+    .clarms-container .clarms-box .clarms-title-container .clarms-t1{
+        font-size: 1.333333rem ;
+    }
+
+    .clarms-container .clarms-box .clarms-title-container .clarms-t2{
+        font-size: 1.333333rem ;
+    }
+}
+
+
+
+@media (max-width: 500px) {
+    .clarms-container .clarms-box .clarms-title-container .clarms-t1{
+        font-size: 1rem;
+    }
+
+    .clarms-container .clarms-box .clarms-title-container .clarms-t2{
+        font-size: 1rem;
+    }
+}
\ No newline at end of file

+<template>
+  <div>
+    <div class="clarms-container">
+      <div class="clarms-box">
+        <div class="clarms-header">
+          <div class="clarms-header-2">
+            <img class="clarms-icon" :src='icon'>
+            <div class="clarms-title-container">
+              <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
+              <div class="clarms-t2">已上传文件：{{uploadFiles}}</div>
+            </div>
+          </div>
+          <div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile">
+            上传
+          </div>
+        </div>
+        <div v-if="images && images.length > 0">
+          <hr>
+          <div class="clarms-img-group">
+            <div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
+              <div class="clarms-img-item">
+                <img class="clarms-img-cont" :src="item.data">
+                <div class="clarms-img-mask" v-if="item.showMask">
+                  <img src="@/assets/images/clarms/close.png">
+                </div>
+                <div class="clarms-img-mask" v-if="item.showMask" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
+                </div>
+              </div>
+              <div class="clarms-upload-tips" v-if="!item.cacheKey && !item.err">Uploading{{item.tips}}</div>
+              <div class="clarms-upload-tips" v-if="item.err">{{item.err}}</div>
+            </div>
+          </div>
+          <div class="clarms-empty-line"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script src="./clarms-upload.js"></script>
+<style lang="scss" scoped>
+@import "./clarms-upload.scss";
+</style>
\ No newline at end of file

@@ -5,6 +5,7 @@ import {
 } from '@/api/fetch-api.js'
 
 import DatePicker from '@/components/date-picker/date-picker.vue';
+import ClarmsUpload from './clarms-upload.vue';
 import Vue from 'vue';
 import { Loading } from 'vant';
 Vue.use(Loading);
@@ -32,7 +33,8 @@ export default {
         }
     },
     components: {
-        DatePicker
+        DatePicker,
+        ClarmsUpload
     },
     computed: {
         i18n() {
@@ -43,6 +45,9 @@ export default {
         initData() {
 
         },
+        uploadSuccess(data){
+            console.log(data);
+        },
 		checkDate(data) {
 			this.contactDateError = data.disable;
 			if (this.contactDateError) {

@@ -114,7 +114,7 @@
             <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
           </div>
           <div class="value">
-            <div >
+            <div>
               <div class="ipt-wrap">
                 <input class="ipt2" type="number">
               </div>
@@ -143,43 +143,24 @@
               {{$t('clarms.step2.label10')}}
             </div>
           </div>
-          <div>
-            <div class="value" style="display:flex;">
-              <div class="upload-item pointer">
-                <div class="upload-icon-1"></div>
-                <div class="tip">{{$t('clarms.step2.label11')}}</div>
-              </div>
-
-              <div class="upload-item ml10 pointer">
-                <div class="upload-icon-2"></div>
-                <div class="tip">{{$t('clarms.step2.label12')}}</div>
-              </div>
-            </div>
+          <div class="value">
+                <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
+                <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
           </div>
         </div>
 
+
         <div class="pure-u-1 form-item-2 mt20">
           <div class="label">
             <div class="main-label">
               {{$t('clarms.step2.label13')}}
             </div>
           </div>
-            <div class="value pure-g">
-              <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
-                <div class="upload-icon-3"></div>
-                <div class="tip">{{$t('clarms.step2.label14')}}</div>
-              </div>
-
-              <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
-                <div class="upload-icon-4"></div>
-                <div class="tip">{{$t('clarms.step2.label15')}}</div>
-              </div>
-
-              <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
-                <div class="upload-icon-5"></div>
-                <div class="tip">{{$t('clarms.step2.label16')}}</div>
-              </div>
-            </div>
+          <div class="value">
+                <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
+                <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
+                <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
+          </div>
         </div>
       </div>
       <hr>

@@ -41,7 +41,7 @@
 				<policy-change-information></policy-change-information>
 			</div>
 			<div class="panel" v-if="activity == 'm5'">
-				<!-- <clarms></clarms> -->
+				<clarms></clarms>
 			</div>
 			<div class="panel" v-if="activity == 'm6'">
 				<reservation></reservation>