Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
f7033f49 by joe
Options

文档上传插件

1 parent fb750e56
Inline Side-by-side
Showing 22 changed files with 459 additions and 31 deletions
...@@ -301,6 +301,13 @@ input::-webkit-search-cancel-button { ...@@ -301,6 +301,13 @@ input::-webkit-search-cancel-button {
301 opacity: 1; 301 opacity: 1;
302 } 302 }
303 303
304
305 ::-webkit-scrollbar{
306 width: 0px;
307 height: 0px;
308 display: none;
309 }
310
304 input::-webkit-input-placeholder { 311 input::-webkit-input-placeholder {
305 color: $cGray2; 312 color: $cGray2;
306 } 313 }
......
...@@ -62,6 +62,8 @@ module.exports = { ...@@ -62,6 +62,8 @@ module.exports = {
62 getDownloadPath : "/pingan_hklife_webapi/policy/getDownloadPath", 62 getDownloadPath : "/pingan_hklife_webapi/policy/getDownloadPath",
63 // 下载电子保单 63 // 下载电子保单
64 downloadPolicy : "/pingan_hklife_webapi/policy/d", 64 downloadPolicy : "/pingan_hklife_webapi/policy/d",
65 // 上传电子文档
66 uploadClarmsImage : "/pingan_hklife_webapi/policy/clarmsUpload",
65 67
66 68
67 // cms相关 69 // cms相关
......
...@@ -67,7 +67,8 @@ let encryptPattern = [ ...@@ -67,7 +67,8 @@ let encryptPattern = [
67 ] 67 ]
68 68
69 let encryptWhileList = [ 69 let encryptWhileList = [
70 "/pingan_hklife_webapi/policy/idPicUpload" 70 "/pingan_hklife_webapi/policy/idPicUpload",
71 "/pingan_hklife_webapi/policy/clarmsUpload"
71 ] 72 ]
72 73
73 // 请求拦截器 74 // 请求拦截器
......

1.79 KB | W: | H:

1.92 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.98 KB | W: | H:

3.77 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.57 KB | W: | H:

1.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.93 KB | W: | H:

2.05 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.7 KB | W: | H:

1.72 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7
8 import Vue from 'vue';
9 import { Loading } from 'vant';
10 Vue.use(Loading);
11
12 export default {
13
14 props: {
15 // 是否显示组件
16 options: {
17 type: Object,
18 default() {
19 return {
20 // 名称
21 name: "",
22 // 图标编号
23 icon: "",
24 // 影像名称
25 imageFileName: "",
26 // 主单证类型
27 imageMainTypeID: "",
28 // 副单证类型
29 imageTypeID: "",
30 };
31 }
32 },
33 icon: {
34 type: String,
35 default: ""
36 }
37 },
38 data() {
39 return {
40 uploadFiles: 0,
41 images: [],
42 }
43 },
44 components: {
45 },
46 computed: {
47 uploading() {
48 let len = this.images.length;
49 if (len < 0) {
50 return false;
51 }
52 for (let index = 0; index < len; index++) {
53 let d = this.images[index] || null;
54 if (!d) {
55 continue;
56 }
57 if (d.intervial) {
58 return true;
59 }
60 }
61 return false;
62 },
63 i18n() {
64 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
65 },
66 },
67 methods: {
68 initData() {
69
70 },
71 selectMutilFile() {
72 if (this.uploading) {
73 return;
74 }
75
76 let _this = this;
77 let input = document.createElement("input");
78 input.setAttribute("type", "file");
79 input.setAttribute("multiple", "multiple");
80 input.setAttribute("accept", "image/*");
81 input.onchange = function (val) {
82 let position = _this.images.length;
83 for (let index = 0; index < input.files.length; index++) {
84 setTimeout(function () {
85 _this.initFileUpload(input.files[index], position + index);
86 }, index * 50);
87 };
88 };
89 input.click();
90 },
91 initFileUpload(file, index) {
92 let _this = this;
93 var reader = new FileReader();
94 reader.onload = function (e) {
95 let d = {
96 file: file,
97 data: reader.result,
98 cacheKey: "",
99 showMask: false,
100 key: _this.randomAesKey(),
101 intervial: false,
102 tips: "",
103 err: ""
104 };
105 _this.$set(_this.images, index, d);
106 _this.handleFileUpload(d, index);
107 }
108 reader.readAsDataURL(file);
109 },
110 handleFileUpload(item, index) {
111 item.intervial = setInterval(function () {
112 item.tips = item.tips + ".";
113 if (item.tips.length > 3) {
114 item.tips = "";
115 }
116 }, 1000);
117 this.$set(this, "images", this.images);
118 let param = {
119 file: item.file,
120 key: item.key
121 }
122 formdata({ url: api.uploadClarmsImage, data: param }).then(res => {
123 item.cacheKey = res.content.id
124 clearInterval(item.intervial);
125 item.intervial = false;
126 this.$set(this, "images", this.images);
127 this.refreshUploadNumber();
128 }).catch(err => {
129 clearInterval(item.intervial);
130 item.intervial = false;
131 item.err = "失败";
132 this.$set(this, "images", this.images);
133 });
134 },
135 refreshUploadNumber() {
136 let d = this.images.length;
137 let number = 0;
138 for (let index = 0; index < d; index++) {
139 let v = this.images[index] || null;
140 if (v && v.cacheKey) {
141 number++;
142 }
143 }
144 this.uploadFiles = number;
145 this.emitResult();
146 },
147 onOverHandler(event, item, index) {
148 item.showMask = true;
149 event.preventDefault();
150 },
151 onOutHandler(event, item, index) {
152 item.showMask = false;
153 event.preventDefault();
154 },
155 removeItem(index) {
156 let images = JSON.parse(JSON.stringify(this.images));
157 images.splice(index, 1);
158 this.$set(this, "images", images);
159 this.refreshUploadNumber();
160 },
161 randomAesKey() {
162 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(",");
163 let res = "";
164 for (let i = 0; i < 16; i++) {
165 let id = Math.ceil(Math.random() * (chars.length - 1));
166 res += chars[id];
167 }
168 return res;
169 },
170 emitResult() {
171 if (this.images.length == 0) {
172 this.$emit("success", []);
173 return;
174 }
175 if (this.uploading) {
176 return;
177 }
178 let result = [];
179 let len = this.images.length;
180 if (len < 0) {
181 return false;
182 }
183 for (let index = 0; index < len; index++) {
184 let d = this.images[index] || null;
185 if (!d || !d.cacheKey) {
186 continue;
187 }
188 // 结果
189 let res = {
190 seqNumber: index + 1,
191 cloudStorageID: d.cacheKey,
192 imageFileName: this.options.imageFileName,
193 imageMainTypeID: this.options.imageMainTypeID,
194 imageTypeID: this.options.imageTypeID
195 }
196 result.push(res);
197 }
198 this.$emit("success", result);
199 }
200 },
201 watch: {
202
203 },
204 mounted() {
205 this.initData();
206 },
207 created() { }
208 }
1 @import '@/styles/_support';
2
3
4 .clarms-container {
5 box-sizing:border-box;
6 padding:.166667rem;
7 border-radius: .416667rem;
8 background-image: linear-gradient(to right , #ffb31d, #f15907) ;
9
10 .clarms-box {
11 width:100%;
12 height:100%;
13 border-radius: .416667rem;
14 background:#fff;
15 padding: 1.666667rem 2.5rem 0 2.5rem;
16
17 .clarms-header {
18 display: flex;
19 align-items: center;
20 margin-bottom: 1.666667rem;
21
22 .clarms-header-2 {
23 flex-grow: 1;
24 display: flex;
25 align-items: center;
26 }
27
28 .clarms-icon {
29 width: 4.166667rem;
30 }
31 }
32
33 .clarms-title-container {
34 margin-left: 2.5rem ;
35 flex-grow: 1;
36 width: 100%;
37
38 .clarmsActivty {
39 color: #ffb31d !important;
40 }
41
42 .clarms-t1 {
43 font-size: 2rem;
44 color: #f15907;
45 letter-spacing: .166667rem;
46 }
47
48 .clarms-t2 {
49 color: #58595b;
50 letter-spacing: .166667rem;
51 }
52 }
53
54 hr {
55 margin: 0 .833333rem 1.666667rem .833333rem;
56 border-top: 1px solid #dddede ;
57 }
58
59 .clarms-btn {
60 background: url(~@/assets/images/clarms/button.png);
61 background-size: 100% 100%;
62 width: 10.583333rem !important;
63 height: 3rem;
64
65 text-align: center;
66 line-height: 3rem;
67 color: white;
68 letter-spacing: .166667rem ;
69 font-size: 1.166667rem;
70 cursor: pointer;
71 }
72
73 .clarms-img-group {
74 display: flex;
75 flex-wrap: wrap;
76
77 .clarms-img-item-plugin {
78 cursor: pointer;
79 margin-right: .833333rem;
80 margin-bottom: .833333rem;
81 width: 5.833333rem;
82 height: 5.833333rem;
83
84 .clarms-img-item {
85 position: relative;
86 width: 5.833333rem;
87 height: 5.833333rem;
88
89 .clarms-img-cont {
90 width: 5.833333rem;
91 height: 5.833333rem;
92 position: absolute;
93 left: 0;
94 top: 0;
95 }
96
97 .clarms-img-mask {
98 width: 5.833333rem;
99 height: 5.833333rem;
100 text-align: center;
101 line-height: 5.833333rem;
102 position: absolute;
103 left: 0;
104 top: 0;
105 display: flex;
106 justify-content: center;
107 align-items: center;
108
109 background-color: rgba($color: #000000, $alpha: .1);
110
111 img {
112 width: 2.5rem ;
113 height: 2.5rem ;
114 }
115 }
116 }
117
118 .clarms-upload-tips {
119 font-size: 1rem ;
120 color: #58595b;
121 text-align: center;
122 }
123 }
124 }
125 }
126
127 .clarms-empty-line {
128 height: .833333rem;
129 }
130 }
131
132
133 @media (max-width: 800px) {
134
135 .clarms-container {
136 .clarms-box {
137 .clarms-header {
138 flex-direction: column;
139
140 .clarms-header-2{
141 align-self: flex-start;
142 }
143
144 .clarms-btn {
145 align-self: flex-end;
146 margin-top: .833333rem;
147 }
148 .clarms-icon {
149 width: 4.166667rem;
150 }
151 }
152 .clarms-title-container {
153 margin-top: .833333rem;
154 margin-left: .833333rem;
155 }
156 }
157 }
158 }
159
160 @media (max-width: 600px) {
161 .clarms-container .clarms-box .clarms-title-container .clarms-t1{
162 font-size: 1.333333rem ;
163 }
164
165 .clarms-container .clarms-box .clarms-title-container .clarms-t2{
166 font-size: 1.333333rem ;
167 }
168 }
169
170
171
172 @media (max-width: 500px) {
173 .clarms-container .clarms-box .clarms-title-container .clarms-t1{
174 font-size: 1rem;
175 }
176
177 .clarms-container .clarms-box .clarms-title-container .clarms-t2{
178 font-size: 1rem;
179 }
180 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div>
3 <div class="clarms-container">
4 <div class="clarms-box">
5 <div class="clarms-header">
6 <div class="clarms-header-2">
7 <img class="clarms-icon" :src='icon'>
8 <div class="clarms-title-container">
9 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
10 <div class="clarms-t2">已上传文件：{{uploadFiles}}</div>
11 </div>
12 </div>
13 <div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile">
14 上传
15 </div>
16 </div>
17 <div v-if="images && images.length > 0">
18 <hr>
19 <div class="clarms-img-group">
20 <div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
21 <div class="clarms-img-item">
22 <img class="clarms-img-cont" :src="item.data">
23 <div class="clarms-img-mask" v-if="item.showMask">
24 <img src="@/assets/images/clarms/close.png">
25 </div>
26 <div class="clarms-img-mask" v-if="item.showMask" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
27 </div>
28 </div>
29 <div class="clarms-upload-tips" v-if="!item.cacheKey && !item.err">Uploading{{item.tips}}</div>
30 <div class="clarms-upload-tips" v-if="item.err">{{item.err}}</div>
31 </div>
32 </div>
33 <div class="clarms-empty-line"></div>
34 </div>
35 </div>
36 </div>
37 </div>
38 </template>
39
40
41 <script src="./clarms-upload.js"></script>
42 <style lang="scss" scoped>
43 @import "./clarms-upload.scss";
44 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -5,6 +5,7 @@ import { ...@@ -5,6 +5,7 @@ import {
5 } from '@/api/fetch-api.js' 5 } from '@/api/fetch-api.js'
6 6
7 import DatePicker from '@/components/date-picker/date-picker.vue'; 7 import DatePicker from '@/components/date-picker/date-picker.vue';
8 import ClarmsUpload from './clarms-upload.vue';
8 import Vue from 'vue'; 9 import Vue from 'vue';
9 import { Loading } from 'vant'; 10 import { Loading } from 'vant';
10 Vue.use(Loading); 11 Vue.use(Loading);
...@@ -32,7 +33,8 @@ export default { ...@@ -32,7 +33,8 @@ export default {
32 } 33 }
33 }, 34 },
34 components: { 35 components: {
35 DatePicker 36 DatePicker,
37 ClarmsUpload
36 }, 38 },
37 computed: { 39 computed: {
38 i18n() { 40 i18n() {
...@@ -43,6 +45,9 @@ export default { ...@@ -43,6 +45,9 @@ export default {
43 initData() { 45 initData() {
44 46
45 }, 47 },
48 uploadSuccess(data){
49 console.log(data);
50 },
46 checkDate(data) { 51 checkDate(data) {
47 this.contactDateError = data.disable; 52 this.contactDateError = data.disable;
48 if (this.contactDateError) { 53 if (this.contactDateError) {
......
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
114 <div class="sub-label">{{$t('clarms.step2.label7')}} </div> 114 <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
115 </div> 115 </div>
116 <div class="value"> 116 <div class="value">
117 <div > 117 <div>
118 <div class="ipt-wrap"> 118 <div class="ipt-wrap">
119 <input class="ipt2" type="number"> 119 <input class="ipt2" type="number">
120 </div> 120 </div>
...@@ -143,42 +143,23 @@ ...@@ -143,42 +143,23 @@
143 {{$t('clarms.step2.label10')}} 143 {{$t('clarms.step2.label10')}}
144 </div> 144 </div>
145 </div> 145 </div>
146 <div> 146 <div class="value">
147 <div class="value" style="display:flex;"> 147 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
148 <div class="upload-item pointer"> 148 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
149 <div class="upload-icon-1"></div>
150 <div class="tip">{{$t('clarms.step2.label11')}}</div>
151 </div>
152
153 <div class="upload-item ml10 pointer">
154 <div class="upload-icon-2"></div>
155 <div class="tip">{{$t('clarms.step2.label12')}}</div>
156 </div>
157 </div>
158 </div> 149 </div>
159 </div> 150 </div>
160 151
152
161 <div class="pure-u-1 form-item-2 mt20"> 153 <div class="pure-u-1 form-item-2 mt20">
162 <div class="label"> 154 <div class="label">
163 <div class="main-label"> 155 <div class="main-label">
164 {{$t('clarms.step2.label13')}} 156 {{$t('clarms.step2.label13')}}
165 </div> 157 </div>
166 </div> 158 </div>
167 <div class="value pure-g"> 159 <div class="value">
168 <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10"> 160 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
169 <div class="upload-icon-3"></div> 161 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
170 <div class="tip">{{$t('clarms.step2.label14')}}</div> 162 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
171 </div>
172
173 <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
174 <div class="upload-icon-4"></div>
175 <div class="tip">{{$t('clarms.step2.label15')}}</div>
176 </div>
177
178 <div class="upload-item pointer pure-u-md-2 pure-u-lg-3 mr10">
179 <div class="upload-icon-5"></div>
180 <div class="tip">{{$t('clarms.step2.label16')}}</div>
181 </div>
182 </div> 163 </div>
183 </div> 164 </div>
184 </div> 165 </div>
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 <policy-change-information></policy-change-information> 41 <policy-change-information></policy-change-information>
42 </div> 42 </div>
43 <div class="panel" v-if="activity == 'm5'"> 43 <div class="panel" v-if="activity == 'm5'">
44 <!-- <clarms></clarms> --> 44 <clarms></clarms>
45 </div> 45 </div>
46 <div class="panel" v-if="activity == 'm6'"> 46 <div class="panel" v-if="activity == 'm6'">
47 <reservation></reservation> 47 <reservation></reservation>
......