Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
50c8ed8b by joe
Options

简易理赔

1 parent ddd35090
Inline Side-by-side
Showing 35 changed files with 1039 additions and 275 deletions
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
8 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 8 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 <link rel="stylesheet" href="./css/pure-min.css"> 9 <link rel="stylesheet" href="./css/pure-min.css">
10 <link rel="stylesheet" href="./css/grids-responsive-min.css"> 10 <link rel="stylesheet" href="./css/grids-responsive-min.css">
......
...@@ -11,8 +11,7 @@ ...@@ -11,8 +11,7 @@
11 11
12 12
13 <script> 13 <script>
14 14 import Vue from "vue";
15 import Vue from 'vue'
16 import { mapGetters, mapActions, mapState } from "vuex"; 15 import { mapGetters, mapActions, mapState } from "vuex";
17 import { getCookie } from "@utils/utils.js"; 16 import { getCookie } from "@utils/utils.js";
18 import VHeader from "@components/home/header/header.vue"; 17 import VHeader from "@components/home/header/header.vue";
...@@ -301,8 +300,7 @@ input::-webkit-search-cancel-button { ...@@ -301,8 +300,7 @@ input::-webkit-search-cancel-button {
301 opacity: 1; 300 opacity: 1;
302 } 301 }
303 302
304 303 ::-webkit-scrollbar {
305 ::-webkit-scrollbar{
306 width: 0px; 304 width: 0px;
307 height: 0px; 305 height: 0px;
308 display: none; 306 display: none;
...@@ -420,10 +418,22 @@ textarea { ...@@ -420,10 +418,22 @@ textarea {
420 } 418 }
421 } 419 }
422 420
423 .flex-center { 421 .el-select .el-input.is-focus .el-input__inner {
424 display: flex; 422 border-color: transparent !important;
425 justify-content: center; 423 }
426 align-items: center; 424
425 .ipt .el-input__inner {
426 border: none !important;
427 background-color: transparent !important;
428 padding: 0 !important;
429 }
430
431 .el-select-dropdown__item.selected {
432 color: $cOrange !important;
433 }
434
435 .el-input__suffix {
436 display: none;
427 } 437 }
428 438
429 @media (max-width: 1200px) { 439 @media (max-width: 1200px) {
......
...@@ -70,6 +70,8 @@ module.exports = { ...@@ -70,6 +70,8 @@ module.exports = {
70 getCidByVerify : "/pingan_hklife_webapi/policy/getCidByVerify", 70 getCidByVerify : "/pingan_hklife_webapi/policy/getCidByVerify",
71 // 客户信息 71 // 客户信息
72 clarmsCustomerList : "/pingan_hklife_webapi/policy/clarmsCustomerList", 72 clarmsCustomerList : "/pingan_hklife_webapi/policy/clarmsCustomerList",
73 // 理赔报案
74 clarmsRegisterCase : "/pingan_hklife_webapi/policy/clarmsRegisterCase",
73 75
74 76
75 // cms相关 77 // cms相关
......
...@@ -835,45 +835,59 @@ module.exports = { ...@@ -835,45 +835,59 @@ module.exports = {
835 step1: { 835 step1: {
836 register: "Register", 836 register: "Register",
837 login: "Login", 837 login: "Login",
838 t1: "Ping An UniAccount that we can provide you with better services", 838 t1: "to OneConnect account to enjoy better service.",
839 label0: "Claimant information", 839 label0: "Claimant information",
840 label1: "Last name", 840 label1: "Last name",
841 label2: "First name", 841 label2: "First name",
842 label3: "Document type", 842 label3: "Document type",
843 label4: "Identification Number", 843 label4: "Identification Number",
844 label5: "Birthday", 844 label5: "Birthday",
845 btn: "Confirm" 845 btn: "Apply now"
846 }, 846 },
847 step2: { 847 step2: {
848 label1: "I want to", 848 label1: "I want to claim for",
849 label2: "Claim for compensation", 849 label2: "",
850 label3: "Application type", 850 label3: "Type of application ",
851 label4: "(Multiple choice)", 851 label4: "(Can choose more than one)",
852 op1: "Accident medical treatment", 852 op1: "Accidential medical",
853 op2: "Accidental death", 853 op2: "Accidential death",
854 op3: "Disease medical treatment", 854 op3: "Illness medical",
855 op4: "Death of illness", 855 op4: "Illness death",
856 op5: "Major diseases", 856 op5: "Critical illness",
857 label5: "Please fill in the amount of this visit.", 857 label5: "Please fill in receipt amount",
858 label6: "Amount of this visit", 858 label6: "Amount",
859 label7: "(HKD)", 859 label7: "(HKD)",
860 label8: "If you pay non Hong Kong dollars at the time of treatment, please convert it into Hong Kong dollars and fill in the amount.", 860 label8: "Please convert to HKD if the currency you paid is not in HKD",
861 label9: "Accident time", 861 label9: "Date",
862 label10: "Must transmit information", 862 label10: "Required Documents",
863 label11: "Expense receipt and list", 863 label11: "Receipts",
864 label12: "Medical records", 864 label12: "Medical record",
865 label13: "Biography data", 865 label13: "Additional Documents",
866 label14: "Hospital diagnosis report", 866 label14: "Hospital diagnostic report",
867 label15: "Account information of claimant", 867 label15: "Claimant information",
868 label16: "Other", 868 label16: "Others",
869 label17: "Statement of authorization:", 869 label17: "Declaration of Authorization: ",
870 label18: "Statement of personal data collection:", 870 label18: "Personal data collection statement: ",
871 btn: "Confirm", 871 btn: "Submit",
872 contact: "I would like to contact customer service", 872 btnUpload: "Upload",
873 tip1: "I / we hereby authorize (1) any employer, registered western medicine, hospital, clinic, insurance company, bank, government agency, or other institution, organization or person, who knows or holds any record of the policyholder / insured, to provide, issue and transfer such information to Ping An Life Insurance (Hong Kong) Co., Ltd. (2) your company or any The doctor or laboratory designated by him may apply for medical assessment and test on behalf of the policyholder / insured for the purpose of examining the health status of the policyholder / insured. This power of attorney shall be binding on the successors and assignors of the policyholder / insured, and shall remain in force even if the policyholder / Insured dies or is incapacitated.", 873 uploadFile: "Uploaded file:",
874 tip2: "I / we confirm that I / we have read and understood the personal data collection statement (this statement) of Ping An Life Insurance (Hong Kong) Co., Ltd.", 874 contact: "Contact customer service",
875 tip3: "I / we hereby confirm and agree that you use and transfer my / our personal data in accordance with this statement, including the use and provision of my / our personal data for direct promotion purposes. I / we confirm and agree to transfer my / our personal data outside Hong Kong to the type of transferee described in this statement for the purposes described in this statement.", 875 tip1: "I / We hereby authorize (1) any employer, registered medical practitioner, hospital, clinic, insurance company, bank, government agency, or other agency, organization, or person who knows or holds any relevant policy holder / Those in the insured's records can provide, issue and transfer these assets to Ping An Life Insurance (Hong Kong) Co., Ltd .; (2) your company or any of its designated doctors or laboratories can apply for compensation for this policy The medical evaluation and testing required for the holder / insured person to audit the health status of the policy holder / insured person. This authorization is binding on the policyholder / insured's heirs and grantors; this authorization is valid even if the policyholder / insured dies or becomes incompetent.",
876 tip4: "I / we hereby declare that all the above statements and information, to the best of my / our knowledge and belief, are true and complete." 876 tip2: "I / We confirm that I have read and understood the Personal Data Collection Statement (Ping An Life Insurance (Hong Kong) Co., Ltd.) (this statement). ",
877 tip3: "I / We hereby confirm and agree to your company's use and transfer of my / our personal assets in accordance with this statement, including the use and provision of my / our personal assets for direct marketing purposes. I / We acknowledge and agree to transfer my / our personal resources for the purposes described in this statement to the type of transferee outside Hong Kong to which this statement refers.",
878 tip4: "I / We hereby declare that the above statement and information, as far as I / we know and believe, are all facts and true.",
879 tip5: "The type of application you selected is not within the scope of insurance liability. Please verify and confirm. If you have any questions, ",
880 tip6: "please contact customer service.",
881 tip7: "Your claim application has been processed and we will process this application as soon as possible. We will notify you of the progress of the claim through a short message. Due to the need for review, we may notify you to supplement the relevant information or mail the physical object. If approved, the claims will be transferred to the insurance payment account by default. If changes are required, ",
882 tip8: "please upload the claimant's account information.",
883 toast1: "Medical treatment receipts",
884 toast2: "Discharge document / doctor's certificate with clear diagnosis",
885 toast3: "Such as blood test report, computer scan report, ultrasound report, etc.",
886 toast4: "The claims are transferred to the insured account by default. If you need to change, please upload the account information.",
887 toast5: "Evidence of accidents such as police reports, traffic accident reports, etc.",
888 failure: "Claim report failed,",
889 failureContact: "Please contact customer service",
890 placeHolder1: "Select",
877 } 891 }
878 } 892 }
879 } 893 }
......
...@@ -859,16 +859,30 @@ module.exports = { ...@@ -859,16 +859,30 @@ module.exports = {
859 label12: "病歷資料", 859 label12: "病歷資料",
860 label13: "選傳資料", 860 label13: "選傳資料",
861 label14: "醫院診斷報告", 861 label14: "醫院診斷報告",
862 label15: "索償人賬戶資料", 862 label15: "索償人資料",
863 label16: "其他", 863 label16: "其他",
864 label17: "授權聲明：", 864 label17: "授權聲明：",
865 label18: "收集個人資料聲明：", 865 label18: "收集個人資料聲明：",
866 btn: "提交", 866 btn: "提交",
867 btnUpload: "上傳",
868 uploadFile: "已上傳文件：",
867 contact: "我想聯絡客服", 869 contact: "我想聯絡客服",
868 tip1 : "本人/我們謹此授權（1）任何雇主、注册西醫、醫院、診所、保險公司、銀行、政府機構、或其他機構、組織或人士、凡知道或持有任何有關保單持有人/受保人之紀錄者，均可將該等資料提供、發放及轉交給中國平安人壽保險（香港）有限公司；（2）貴公司或任何其指定之醫生或化驗所，可就此賠償申請替保單持有人/受保人進行所需之醫療評估及測試，作為稽核保單持有人/受保人之健康狀況。此授權對保單持有人/受保人之繼承人及授讓人具有約束力；即使保單持有人/受保人死亡或無行為能力時，此授權書仍具效力。", 870 tip1: "本人/我們謹此授權（1）任何雇主、注册西醫、醫院、診所、保險公司、銀行、政府機構、或其他機構、組織或人士、凡知道或持有任何有關保單持有人/受保人之紀錄者，均可將該等資料提供、發放及轉交給中國平安人壽保險（香港）有限公司；（2）貴公司或任何其指定之醫生或化驗所，可就此賠償申請替保單持有人/受保人進行所需之醫療評估及測試，作為稽核保單持有人/受保人之健康狀況。此授權對保單持有人/受保人之繼承人及授讓人具有約束力；即使保單持有人/受保人死亡或無行為能力時，此授權書仍具效力。",
869 tip2 : "本人/我們確認已閱讀及明白「中國平安人壽保險（香港）有限公司」的收集個人資料聲明（本聲明）。", 871 tip2: "本人/我們確認已閱讀及明白「中國平安人壽保險（香港）有限公司」的收集個人資料聲明（本聲明）。",
870 tip3 : "本人/我們特此確認並同意貴公司根據本聲明使用和移轉本人/我們的個人資料，包括為直接促銷之目的使用和提供本人/我們的個人資料。本人/我們確認並同意為本聲明中所述之目的將本人/我們的個人資料移轉至香港境外給本聲明所述的承轉人的類別。", 872 tip3: "本人/我們特此確認並同意貴公司根據本聲明使用和移轉本人/我們的個人資料，包括為直接促銷之目的使用和提供本人/我們的個人資料。本人/我們確認並同意為本聲明中所述之目的將本人/我們的個人資料移轉至香港境外給本聲明所述的承轉人的類別。",
871 tip4 : "本人/我們謹此聲明上述一切陳述及資料，就本人/我們所知所信，均為事實之全部並確實無訛。" 873 tip4: "本人/我們謹此聲明上述一切陳述及資料，就本人/我們所知所信，均為事實之全部並確實無訛。",
874 tip5: "您選擇的申請類型不在保險責任範圍內，請核實確認，如有疑問可",
875 tip6: "聯繫客服",
876 tip7: "您的理賠申請已經受理，我們會儘快處理本次申請。我們會短信通知理賠進度，因審核需要，可能會通知您補充相關資料或者郵寄實物。如審批通過，理賠款將默認轉入投保繳費帳戶，如需變更，",
877 tip8: "請上傳索償人帳戶資料。",
878 toast1: "醫療收據正本及帳單明細表",
879 toast2: "載有明確診斷之出院紙/醫生證明書等檔",
880 toast3: "如驗血報告、電腦掃描報告、超聲波報告等",
881 toast4: "本次理賠款默認轉入投保帳戶，如需變更，請上傳帳戶資料",
882 toast5: "如員警報告、交通意外報告等意外事故證明材料",
883 failure: "理賠報案失敗，",
884 failureContact: "請聯繫客服解決",
885 placeHolder1: "請選擇",
872 } 886 }
873 } 887 }
874 } 888 }
......
...@@ -861,16 +861,30 @@ module.exports = { ...@@ -861,16 +861,30 @@ module.exports = {
861 label12: "病例资料", 861 label12: "病例资料",
862 label13: "选传资料", 862 label13: "选传资料",
863 label14: "医院诊断报告", 863 label14: "医院诊断报告",
864 label15: "索偿人账户资料", 864 label15: "索偿人资料",
865 label16: "其他", 865 label16: "其他",
866 label17: "授权声明：", 866 label17: "授权声明：",
867 label18: "收集个人资料声明：", 867 label18: "收集个人资料声明：",
868 btn: "提交", 868 btn: "提交",
869 btnUpload : "上传",
870 uploadFile : "已上传文件：",
869 contact: "我想联络客服", 871 contact: "我想联络客服",
870 tip1: "本人/我们谨此授权（1）任何雇主、注册西医、医院、诊所、保险公司、银行、政府机构、或其他机构、组织或人士、凡知道或持有任何有关保单持有人/受保人之纪录者，均可将该等数据提供、发放及转交给中国平安人寿保险（香港）有限公司；（2）贵公司或任何其指定之医生或化验所，可就此赔偿申请替保单持有人/受保人进行所需之医疗评价及测试，作为审核保单持有人/受保人之健康状况。此授权对保单持有人/受保人之继承人及授让人具有约束力；即使保单持有人/受保人死亡或无行为能力时，此授权书仍具效力。", 872 tip1: "本人/我们谨此授权（1）任何雇主、注册西医、医院、诊所、保险公司、银行、政府机构、或其他机构、组织或人士、凡知道或持有任何有关保单持有人/受保人之纪录者，均可将该等数据提供、发放及转交给中国平安人寿保险（香港）有限公司；（2）贵公司或任何其指定之医生或化验所，可就此赔偿申请替保单持有人/受保人进行所需之医疗评价及测试，作为审核保单持有人/受保人之健康状况。此授权对保单持有人/受保人之继承人及授让人具有约束力；即使保单持有人/受保人死亡或无行为能力时，此授权书仍具效力。",
871 tip2: "本人/我们确认已阅读及明白「中国平安人寿保险（香港）有限公司」的收集个人资料声明（本声明）。", 873 tip2: "本人/我们确认已阅读及明白「中国平安人寿保险（香港）有限公司」的收集个人资料声明（本声明）。",
872 tip3: "本人/我们特此确认并同意贵公司根据本声明使用和移转本人/我们的个人资料，包括为直接促销之目的使用和提供本人/我们的个人资料。本人/我们确认并同意为本声明中所述之目的将本人/我们的个人资料移转至香港境外给本声明所述的承转人的类别。", 874 tip3: "本人/我们特此确认并同意贵公司根据本声明使用和移转本人/我们的个人资料，包括为直接促销之目的使用和提供本人/我们的个人资料。本人/我们确认并同意为本声明中所述之目的将本人/我们的个人资料移转至香港境外给本声明所述的承转人的类别。",
873 tip4: "本人/我们谨此声明上述一切陈述及数据，就本人/我们所知所信，均为事实之全部并确实无讹。" 875 tip4: "本人/我们谨此声明上述一切陈述及数据，就本人/我们所知所信，均为事实之全部并确实无讹。",
876 tip5: "您选择的申请类型不在保险责任范围内，请核实确认，如有疑问可",
877 tip6: "联系客服",
878 tip7: "您的理赔申请已经受理，我们会尽快处理本次申请。我们会短信通知理赔进度，因审核需要，可能会通知您补充相关资料或者邮寄实物。如审批通过，理赔款将默认转入投保缴费账户，如需变更，",
879 tip8: "请上传索偿人账户资料。",
880 toast1 : "医疗收据正本及账单明细表",
881 toast2 : "载有明确诊断之出院纸/医生证明书等文件",
882 toast3 : "如验血报告、计算机扫描报告、超声波报告等",
883 toast4 : "本次理赔款默认转入投保账户，如需变更，请上传账户资料",
884 toast5 : "如警察报告、交通意外报告等意外事故证明材料",
885 failure : "理赔报案失败，",
886 failureContact : "请联系客服解决",
887 placeHolder1 : "请选择",
874 } 888 }
875 } 889 }
876 } 890 }
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7
8 import DatePicker from '@/components/date-picker/date-picker.vue';
9 import ClarmsUpload from './clarms-plugins-upload.vue';
10 import Vue from 'vue';
11 import { Loading } from 'vant';
12 import { Select, Option } from 'element-ui';
13
14 Vue.use(Loading);
15 Vue.use(Select);
16 Vue.use(Option);
17
18 export default {
19 props: {
20 // 是否显示组件
21 insuredList: {
22 type: Array,
23 default() {
24 return []
25 }
26 },
27 cid: {
28 type: String,
29 default: ""
30 }
31 },
32 data() {
33 return {
34 showTips: false,
35 // 候选人所购买的保单可选择的类型
36 /**
37 * 1 意外医疗
38 * 2 疾病医疗
39 * 3 意外残疾
40 * 4 疾病残疾
41 * 5 意外死亡
42 * 6 疾病死亡
43 * 7 重大疾病
44 */
45 typeCandidates: ['1', '2', '5', '6', '7'],
46 // 已经选择的类型,
47 typeSelected: [],
48 images: [],
49 agress: false,
50 data: {
51 insuredIndex: "",
52 amount: 0,
53 contactDate: "",
54 // 必传资料
55 HT41: null,
56 HT26: null,
57 // 非必传资料
58 HT29: null,
59 HT34: null,
60 HT16: null,
61
62 // 是否正在上传
63 HT41Uploading: false,
64 HT26Uploading: false,
65 HT29Uploading: false,
66 HT34Uploading: false,
67 HT16Uploading: false,
68
69 },
70 loading: false,
71 contactDateError: false
72 }
73 },
74 components: {
75 DatePicker,
76 ClarmsUpload
77 },
78 computed: {
79 lan() {
80 return this.$i18n.locale;
81 },
82 i18n() {
83 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
84 },
85 submitBtnDisabled() {
86 // 受保人
87 let b1 = this.data.insuredIndex ? false : true;
88 // 申请类型
89 let b2 = this.typeSelected.length > 0 ? false : true;
90 // 申请额度
91 let b3 = this.data.amount > 0 ? false : true;
92 // 日期校验
93 let b4 = this.data.contactDate ? false : true;
94 let b5 = this.contactDateError;
95
96 // 必传资料
97 let b6 = this.data.HT41 && this.data.HT41.length > 0 ? false : true;
98 let b7 = this.data.HT26 && this.data.HT26.length > 0 ? false : true;
99 // 资料上传中
100 let b8 = this.data.HT41Uploading || this.data.HT26Uploading || this.data.HT29Uploading || this.data.HT34Uploading || this.data.HT16Uploading;
101 let b9 = !this.agress;
102
103 return b1 || b2 || b3 || b4 || b5 || b6 || b7 || b8 || b9;
104 }
105 },
106 methods: {
107 initData() {
108 // console.log("this.insuredList = ", this.insuredList);
109 },
110 typeClickHandle(t) {
111 let index = this.typeSelected.indexOf(t);
112 if (index > -1) {
113 this.typeSelected.splice(index, 1);
114 } else {
115 this.typeSelected.push(t);
116 }
117 },
118 amountCheck() {
119 if (this.data.amount) {
120 if (this.data.amount < 0) {
121 this.data.amount = 0;
122 } else if (this.data.amount > 5000) {
123 this.data.amount = 5000;
124 }
125 }
126 },
127 uploadSuccess(data) {
128 console.log(data);
129 switch (data.type) {
130 case "HT41":
131 this.data.HT41Uploading = false;
132 this.data.HT41 = data.list;
133 break;
134 case "HT26":
135 this.data.HT26Uploading = false;
136 this.data.HT26 = data.list;
137 break;
138 case "HT29":
139 this.data.HT29Uploading = false;
140 this.data.HT29 = data.list;
141 break;
142 case "HT34":
143 this.data.HT34Uploading = false;
144 this.data.HT34 = data.list;
145 break;
146 case "HT16":
147 this.data.HT16Uploading = false;
148 this.data.HT16 = data.list;
149 break;
150 }
151 },
152 beforeUpload(data) {
153 console.log(data);
154 switch (data.type) {
155 case "HT41":
156 this.data.HT41Uploading = true;
157 this.data.HT41 = [];
158 break;
159 case "HT26":
160 this.data.HT26Uploading = true;
161 this.data.HT26 = [];
162 break;
163 case "HT29":
164 this.data.HT29Uploading = true;
165 this.data.HT29 = [];
166 break;
167 case "HT34":
168 this.data.HT34Uploading = true;
169 this.data.HT34 = [];
170 break;
171 case "HT16":
172 this.data.HT16Uploading = true;
173 this.data.HT16 = [];
174 break;
175 }
176 },
177 checkDate(data) {
178 this.contactDateError = data.disable;
179 if (this.contactDateError) {
180
181 }
182 },
183 toContact() {
184 this.$router.push({
185 path: "/custom/service?q=m1"
186 });
187 },
188 submitMaterial() {
189
190 if (this.submitBtnDisabled) {
191 return;
192 }
193 if (this.loading) {
194 return;
195 }
196 let policy = this.checkPolicy();
197 if (!policy) {
198 return;
199 }
200 let insured = this.insuredList[this.data.insuredIndex - 1];
201 this.loading = true;
202
203 let imageList = [];
204 imageList = this.data.HT41 && this.data.HT41.length > 0 ? imageList.concat(this.data.HT41) : imageList;
205 imageList = this.data.HT26 && this.data.HT26.length > 0 ? imageList.concat(this.data.HT26) : imageList;
206 imageList = this.data.HT29 && this.data.HT29.length > 0 ? imageList.concat(this.data.HT29) : imageList;
207 imageList = this.data.HT34 && this.data.HT34.length > 0 ? imageList.concat(this.data.HT34) : imageList;
208 imageList = this.data.HT16 && this.data.HT16.length > 0 ? imageList.concat(this.data.HT16) : imageList;
209
210 let params = {
211 cid: this.cid,
212 insuredId: insured.insuredId,
213 policyId: policy.policyId,
214 accidentTime : this.data.contactDate,
215 applyReasonList: this.typeSelected.join(","),
216 treatmentAmount: this.data.amount,
217 imageList: imageList
218 }
219 console.log("params == ", params);
220 httpPost({ url: api.clarmsRegisterCase, data: params }).then(res => {
221 this.$emit("showModal", 2);
222 this.loading = false;
223 }).catch(e => {
224 this.loading = false;
225 })
226 },
227 checkPolicy() {
228 // 校验选择的受保人在选择的时间点内是否有保单
229 if (this.contactDateError) {
230 return false;
231 }
232 if (!this.data.contactDate || !this.data.insuredIndex) {
233 return false;
234 }
235 let insured = this.insuredList[this.data.insuredIndex - 1];
236 if (!insured.policyInfoList || insured.policyInfoList.length <= 0) {
237 this.$emit("showModal", 1);
238 return false;
239 }
240 // console.log("insured === ", insured);
241 var time = new Date(this.data.contactDate.replace(/\-/g, "/") + " 00:00:00").getTime();
242 for (let index = 0; index < insured.policyInfoList.length; index++) {
243 let policy = insured.policyInfoList[index];
244 if (policy.activeDate <= time && policy.expireDate >= time) {
245 return policy;
246 }
247 }
248 this.$emit("showModal", 1);
249 return false;
250 }
251 },
252 watch: {
253 "data.insuredIndex": function () {
254 this.checkPolicy();
255 },
256 "data.contactDate": function () {
257 this.checkPolicy();
258 }
259 },
260 mounted() {
261 this.initData();
262 },
263 created() { }
264 }
...@@ -26,6 +26,7 @@ input { ...@@ -26,6 +26,7 @@ input {
26 cursor: pointer; 26 cursor: pointer;
27 margin: 2.5rem auto; 27 margin: 2.5rem auto;
28 text-align: center; 28 text-align: center;
29 border-radius: 2rem;
29 } 30 }
30 31
31 .reservation-container-2 { 32 .reservation-container-2 {
...@@ -40,6 +41,12 @@ input { ...@@ -40,6 +41,12 @@ input {
40 padding:.166667rem; 41 padding:.166667rem;
41 border-radius: .416667rem; 42 border-radius: .416667rem;
42 background-image: linear-gradient(to right , #ffb31d, #f15907) ; 43 background-image: linear-gradient(to right , #ffb31d, #f15907) ;
44 margin: 0 1.25rem ;
45 min-width: 25rem ;
46
47 .clarms-select {
48 width: 100%;
49 }
43 } 50 }
44 51
45 .title { 52 .title {
...@@ -76,6 +83,14 @@ input { ...@@ -76,6 +83,14 @@ input {
76 flex-wrap: wrap; 83 flex-wrap: wrap;
77 } 84 }
78 85
86 .check-disabled {
87 cursor: default;
88
89 span {
90 color: $cDisabled;
91 }
92 }
93
79 .check-item { 94 .check-item {
80 display: flex; 95 display: flex;
81 align-items: center; 96 align-items: center;
...@@ -114,53 +129,6 @@ input { ...@@ -114,53 +129,6 @@ input {
114 margin-top: .833333rem; 129 margin-top: .833333rem;
115 } 130 }
116 131
117 .upload-item {
118
119 .tip {
120 color: $cOrange;
121 font-size: 1rem;
122 margin-top: .833333rem ;
123 text-align: center;
124 width: 8.333333rem ;
125 letter-spacing: 1px;
126 }
127
128 .upload-icon-1 {
129 width: 8.333333rem ;
130 height: 8.333333rem ;
131 background: url("~@/assets/images/clarms/icon1.png");
132 background-size: 100% 100%;
133 }
134
135 .upload-icon-2 {
136 width: 8.333333rem ;
137 height: 8.333333rem ;
138 background: url("~@/assets/images/clarms/icon2.png");
139 background-size: 100% 100%;
140 }
141
142 .upload-icon-3 {
143 width: 8.333333rem ;
144 height: 8.333333rem ;
145 background: url("~@/assets/images/clarms/icon3.png");
146 background-size: 100% 100%;
147 }
148
149 .upload-icon-4 {
150 width: 8.333333rem ;
151 height: 8.333333rem ;
152 background: url("~@/assets/images/clarms/icon4.png");
153 background-size: 100% 100%;
154 }
155
156 .upload-icon-5 {
157 width: 8.333333rem ;
158 height: 8.333333rem ;
159 background: url("~@/assets/images/clarms/icon5.png");
160 background-size: 100% 100%;
161 }
162 }
163
164 .bottom-tip { 132 .bottom-tip {
165 font-size: .833333rem ; 133 font-size: .833333rem ;
166 display: flex; 134 display: flex;
...@@ -201,6 +169,28 @@ input { ...@@ -201,6 +169,28 @@ input {
201 color: $cOrange; 169 color: $cOrange;
202 font-weight: 600; 170 font-weight: 600;
203 } 171 }
172
173
174
175 .tips {
176 align-items: center;
177 justify-content: center;
178 display: flex;
179 font-size: 1.333333rem;
180
181 .icon {
182 width:1.333333rem;
183 margin-right: 5px;
184 display: inline-block;
185 }
186
187 .btn {
188 margin-left: 0;
189 color: $cOrange;
190 font-weight: 600;
191 font-size: 1.333333rem;
192 }
193 }
204 } 194 }
205 195
206 196
...@@ -302,7 +292,7 @@ input { ...@@ -302,7 +292,7 @@ input {
302 292
303 .label { 293 .label {
304 align-items: center; 294 align-items: center;
305 width: 25%; 295 width: 30%;
306 padding-left: 5px; 296 padding-left: 5px;
307 letter-spacing: .25rem; 297 letter-spacing: .25rem;
308 298
...@@ -318,7 +308,7 @@ input { ...@@ -318,7 +308,7 @@ input {
318 } 308 }
319 309
320 .value { 310 .value {
321 width: 75%; 311 width: 70%;
322 position: relative; 312 position: relative;
323 .ipt-wrap { 313 .ipt-wrap {
324 314
...@@ -411,6 +401,16 @@ input { ...@@ -411,6 +401,16 @@ input {
411 } 401 }
412 402
413 @media (max-width: 600px) { 403 @media (max-width: 600px) {
404
405
406 .reservation-container-2 {
407
408 .clarms-border{
409 min-width: auto;
410 margin: 0 .25rem;
411 }
412 }
413
414 .form { 414 .form {
415 &-item { 415 &-item {
416 width: 100%; 416 width: 100%;
...@@ -433,11 +433,13 @@ input { ...@@ -433,11 +433,13 @@ input {
433 } 433 }
434 434
435 &-item-2 { 435 &-item-2 {
436 display: block;
436 .label { 437 .label {
437 width: 30%; 438 width: 100%;
439 margin-bottom:10px;
438 } 440 }
439 .value { 441 .value {
440 width: 70%; 442 width: 100%;
441 } 443 }
442 444
443 .date-container { 445 .date-container {
......
...@@ -4,9 +4,15 @@ ...@@ -4,9 +4,15 @@
4 <div class="title default-mt"> 4 <div class="title default-mt">
5 <span>{{$t('clarms.step2.label1')}}</span> 5 <span>{{$t('clarms.step2.label1')}}</span>
6 <div class="clarms-border"> 6 <div class="clarms-border">
7 <el-select v-model="data.insured"> 7 <el-select class="clarms-select" v-model="data.insuredIndex" :placeholder="$t('clarms.step2.placeHolder1')">
8 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="item.insuredNameCn"> 8 <template v-if="lan == 'en'">
9 </el-option> 9 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameEn" :value="index + 1">
10 </el-option>
11 </template>
12 <template v-else>
13 <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="index + 1">
14 </el-option>
15 </template>
10 </el-select> 16 </el-select>
11 </div> 17 </div>
12 <span>{{$t('clarms.step2.label2')}}</span> 18 <span>{{$t('clarms.step2.label2')}}</span>
...@@ -30,21 +36,20 @@ ...@@ -30,21 +36,20 @@
30 <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')"> 36 <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
31 <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png"> 37 <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
32 <img v-else src="@/assets/images/clarms/uncheck.png"> 38 <img v-else src="@/assets/images/clarms/uncheck.png">
33 <span>{{$t('clarms.step2.op2')}}</span>
34 </div>
35 <div class="check-item pointer" v-if="typeCandidates.indexOf('3') > -1" @click="typeClickHandle('3')">
36 <img v-if="typeSelected.indexOf('3') > -1" src="@/assets/images/clarms/checked.png">
37 <img v-else src="@/assets/images/clarms/uncheck.png">
38 <span>{{$t('clarms.step2.op3')}}</span> 39 <span>{{$t('clarms.step2.op3')}}</span>
39 </div> 40 </div>
40 <div class="check-item pointer" v-if="typeCandidates.indexOf('4') > -1" @click="typeClickHandle('4')"> 41 <div class="check-item check-disabled">
41 <img v-if="typeSelected.indexOf('4') > -1" src="@/assets/images/clarms/checked.png"> 42 <img src="@/assets/images/clarms/uncheck-disabled.png">
42 <img v-else src="@/assets/images/clarms/uncheck.png"> 43 <!-- <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
44 <img v-else src="@/assets/images/clarms/uncheck.png"> -->
45 <span>{{$t('clarms.step2.op2')}}</span>
46 </div>
47 <div class="check-item check-disabled">
48 <img src="@/assets/images/clarms/uncheck-disabled.png">
43 <span>{{$t('clarms.step2.op4')}}</span> 49 <span>{{$t('clarms.step2.op4')}}</span>
44 </div> 50 </div>
45 <div class="check-item pointer" v-if="typeCandidates.indexOf('5') > -1" @click="typeClickHandle('5')"> 51 <div class="check-item check-disabled">
46 <img v-if="typeSelected.indexOf('5') > -1" src="@/assets/images/clarms/checked.png"> 52 <img src="@/assets/images/clarms/uncheck-disabled.png">
47 <img v-else src="@/assets/images/clarms/uncheck.png">
48 <span>{{$t('clarms.step2.op5')}}</span> 53 <span>{{$t('clarms.step2.op5')}}</span>
49 </div> 54 </div>
50 </div> 55 </div>
...@@ -62,7 +67,7 @@ ...@@ -62,7 +67,7 @@
62 <div class="value"> 67 <div class="value">
63 <div> 68 <div>
64 <div class="ipt-wrap"> 69 <div class="ipt-wrap">
65 <input class="ipt2" type="number"> 70 <input class="ipt2" type="number" v-model="data.amount" @blur="amountCheck">
66 </div> 71 </div>
67 </div> 72 </div>
68 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div> 73 <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div>
...@@ -90,8 +95,8 @@ ...@@ -90,8 +95,8 @@
90 </div> 95 </div>
91 </div> 96 </div>
92 <div class="value"> 97 <div class="value">
93 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload> 98 <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',toast:$t('clarms.step2.toast1')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
94 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload> 99 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast2')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
95 </div> 100 </div>
96 </div> 101 </div>
97 102
...@@ -102,9 +107,9 @@ ...@@ -102,9 +107,9 @@
102 </div> 107 </div>
103 </div> 108 </div>
104 <div class="value"> 109 <div class="value">
105 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload> 110 <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',toast:$t('clarms.step2.toast3')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
106 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload> 111 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',toast:$t('clarms.step2.toast4')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
107 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload> 112 <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',toast:$t('clarms.step2.toast5')}" @success="uploadSuccess" @beforeUpload="beforeUpload"></clarms-upload>
108 </div> 113 </div>
109 </div> 114 </div>
110 </div> 115 </div>
...@@ -122,9 +127,20 @@ ...@@ -122,9 +127,20 @@
122 <span>{{$t('clarms.step2.tip4')}}</span> 127 <span>{{$t('clarms.step2.tip4')}}</span>
123 </div> 128 </div>
124 129
125 <div class="submit-btn">{{$t('clarms.step2.btn')}}</div> 130 <div class="submit-btn pointer flex-center" :class="{disabled: submitBtnDisabled || showTips}" @click="submitMaterial">
131 <van-loading v-if="loading" />
132 {{$t('clarms.step2.btn')}}
133 </div>
134
135 <div class="contact" v-if="!showTips" @click="toContact">{{$t('clarms.step2.contact')}}</div>
126 136
127 <div class="contact" @click="toContact">{{$t('clarms.step2.contact')}}</div> 137 <div class="tips" v-if="showTips">
138 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
139 <div class="txt">
140 {{$t('clarms.step2.failure')}}
141 <span class="pointer btn" @click="toContact">{{$t('clarms.step2.failureContact')}}</span>
142 </div>
143 </div>
128 </div> 144 </div>
129 </template> 145 </template>
130 146
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7 1
8 import Vue from 'vue';
9 import DatePicker from '@/components/date-picker/date-picker.vue';
10 import { Loading } from 'vant';
11 Vue.use(Loading);
12 2
13 export default { 3 export default {
14 data() { 4 data() {
15 return { 5 return {
16 data : {}, 6
17 reservationTypes: []
18 } 7 }
19 }, 8 },
20 components: { 9 components: {},
21 DatePicker
22 },
23 computed: { 10 computed: {
24 i18n() {
25 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
26 },
27 }, 11 },
28 methods: { 12 methods: {
29 initData() { 13 initData() {
30 14
31 }, 15 },
32 checkDate(){ 16 onOverLayHandler() {
33 17 this.$emit("close");
18 },
19 toContact() {
20 this.$router.push({
21 path: "/custom/service?q=m1"
22 });
34 } 23 }
35 }, 24 },
36 watch: { 25 mounted() {
37 26
38 }, 27 },
39 mounted() { 28 created() {
40 this.initData(); 29 this.initData();
41 }, 30 },
42 created() { } 31 watch: {
32 },
43 } 33 }
......
1 @import '@/styles/_support';
2
3 .comp {
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 999;
8 width: 100%;
9 height: 100%;
10 @extend .fcc;
11 text-align: center;
12 }
13
14 .overlay {
15 position: absolute;
16 top: 0;
17 left: 0;
18 width: 100%;
19 height: 100%;
20 background: rgba($color: #000000, $alpha: 0.7);
21 }
22
23 .modal {
24 position: relative;
25 @extend .bb;
26 width: 63.333333rem;
27 // height: 28.5rem;
28 border-radius: .8333rem;
29 background-color: #ffffff;
30 padding: 3.5rem 2rem 2.5rem;
31 border: .083333rem solid $cOrange;
32
33
34 .content {
35 display: flex;
36 justify-content: flex-start;
37 align-items: center;
38 padding: 10rem 8.333333rem;
39
40 .info-icon {
41 width: 10rem;
42 min-width: 6rem;
43 img {
44 width:100%;
45 }
46 }
47
48 .message {
49 margin-left: 1.666667rem;
50 font-size: 1.333333rem;
51 font-weight: 600;
52 color: $cOrange;
53 letter-spacing: .083333rem ;
54 text-align: left;
55 line-height: 1.5;
56
57 span {
58 cursor: pointer;
59 text-decoration: underline;
60 }
61 }
62 }
63
64 .close {
65 cursor: pointer;
66 img {
67 width: 1.666667rem ;
68 position: absolute;
69 right: -2.5rem;
70 top: -1.666667rem ;
71 }
72 }
73 }
74
75
76 @media (max-width: 800px) {
77 .modal {
78 // height: 28.5rem;
79 padding: 3rem 1.5rem;
80 width: 80%;
81 height: auto;
82
83 .content {
84 padding: 5rem 4rem;
85 }
86 .close {
87 display: none;
88 }
89 }
90 }
91
92 @media (max-width: 700px) {
93 .modal {
94 // height: 28.5rem;
95 padding: 3rem 1.5rem;
96 width: 80%;
97 height: auto;
98
99 .content {
100 padding: 4rem 2rem;
101 }
102 .close {
103 display: none;
104 }
105 }
106 }
107
108
109
110 @media (max-width: 450px) {
111 .modal {
112 // height: 28.5rem;
113 padding: 3rem 1.5rem;
114 width: 90%;
115 height: auto;
116
117 .close {
118 display: none;
119 }
120 .content {
121 padding: 2rem .5rem;
122 }
123 }
124 }
1
2 <template>
3 <div class="comp">
4 <div @click="onOverLayHandler()" class="overlay"></div>
5 <div class="modal">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="content">
8 <div class="info-icon">
9 <img src="@/assets/images/clarms/info.png">
10 </div>
11 <div class="message">
12 {{$t('clarms.step2.tip5')}}<span @click="toContact">{{$t('clarms.step2.tip6')}}</span>
13 </div>
14 </div>
15 </div>
16 </div>
17 </template>
18
19 <script src="./clarms-plugins-modal1.js"></script>
20 <style lang="scss" scoped>
21 @import "./clarms-plugins-modal1.scss";
22 </style>
1
2
3 export default {
4 data() {
5 return {
6
7 }
8 },
9 components: {},
10 computed: {
11 },
12 methods: {
13 initData() {
14
15 },
16 onOverLayHandler() {
17 this.$emit("close");
18 },
19 toContact() {
20 this.$router.push({
21 path: "/custom/service?q=m1"
22 });
23 }
24 },
25 mounted() {
26
27 },
28 created() {
29 this.initData();
30 },
31 watch: {
32 },
33 }
1 @import '@/styles/_support';
2
3 .comp {
4 position: fixed;
5 top: 0;
6 left: 0;
7 z-index: 999;
8 width: 100%;
9 height: 100%;
10 @extend .fcc;
11 text-align: center;
12 }
13
14 .overlay {
15 position: absolute;
16 top: 0;
17 left: 0;
18 width: 100%;
19 height: 100%;
20 background: rgba($color: #000000, $alpha: 0.7);
21 }
22
23 .modal {
24 position: relative;
25 @extend .bb;
26 width: 63.333333rem;
27 // height: 28.5rem;
28 border-radius: .8333rem;
29 background-color: #ffffff;
30 padding: 3.5rem 2rem 2.5rem;
31 border: .083333rem solid $cOrange;
32
33
34 .content {
35 display: flex;
36 justify-content: flex-start;
37 align-items: center;
38 padding: 10rem 8.333333rem;
39
40 .info-icon {
41 width: 10rem;
42 min-width: 6rem;
43 img {
44 width:100%;
45 }
46 }
47
48 .message {
49 margin-left: 1.666667rem;
50 font-size: 1.333333rem;
51 font-weight: 600;
52 color: $cOrange;
53 letter-spacing: .083333rem ;
54 text-align: left;
55 line-height: 1.5;
56
57 span {
58 cursor: pointer;
59 text-decoration: underline;
60 }
61 }
62 }
63
64 .close {
65 cursor: pointer;
66 img {
67 width: 1.666667rem ;
68 position: absolute;
69 right: -2.5rem;
70 top: -1.666667rem ;
71 }
72 }
73 }
74
75
76 @media (max-width: 800px) {
77 .modal {
78 // height: 28.5rem;
79 padding: 3rem 1.5rem;
80 width: 80%;
81 height: auto;
82
83 .content {
84 padding: 5rem 4rem;
85 }
86 .close {
87 display: none;
88 }
89 }
90 }
91
92 @media (max-width: 700px) {
93 .modal {
94 // height: 28.5rem;
95 padding: 3rem 1.5rem;
96 width: 80%;
97 height: auto;
98
99 .content {
100 padding: 4rem 2rem;
101 }
102 .close {
103 display: none;
104 }
105 }
106 }
107
108
109
110 @media (max-width: 450px) {
111 .modal {
112 // height: 28.5rem;
113 padding: 3rem 1.5rem;
114 width: 90%;
115 height: auto;
116
117 .close {
118 display: none;
119 }
120 .content {
121 padding: 2rem .5rem;
122 }
123 }
124 }
1
2 <template>
3 <div class="comp">
4 <div @click="onOverLayHandler()" class="overlay"></div>
5 <div class="modal">
6 <div class="close" @click="onOverLayHandler()"><img src="@/assets/images/clarms/close.png"></div>
7 <div class="content">
8 <div class="info-icon">
9 <img src="@/assets/images/clarms/suc.png">
10 </div>
11 <div class="message">
12 {{$t('clarms.step2.tip7')}}<span @click="onOverLayHandler">{{$t('clarms.step2.tip8')}}</span>
13 </div>
14 </div>
15 </div>
16 </div>
17 </template>
18
19 <script src="./clarms-plugins-modal2.js"></script>
20 <style lang="scss" scoped>
21 @import "./clarms-plugins-modal2.scss";
22 </style>
...@@ -25,6 +25,8 @@ export default { ...@@ -25,6 +25,8 @@ export default {
25 imageMainTypeID: "", 25 imageMainTypeID: "",
26 // 副单证类型 26 // 副单证类型
27 imageTypeID: "", 27 imageTypeID: "",
28 // toast消息
29 toast: "",
28 }; 30 };
29 } 31 }
30 }, 32 },
...@@ -70,7 +72,7 @@ export default { ...@@ -70,7 +72,7 @@ export default {
70 if (this.uploading) { 72 if (this.uploading) {
71 return; 73 return;
72 } 74 }
73 75 this.$emit("beforeUpload", { type: this.options.imageTypeID });
74 let _this = this; 76 let _this = this;
75 let input = document.createElement("input"); 77 let input = document.createElement("input");
76 input.setAttribute("type", "file"); 78 input.setAttribute("type", "file");
...@@ -119,17 +121,26 @@ export default { ...@@ -119,17 +121,26 @@ export default {
119 key: item.key 121 key: item.key
120 } 122 }
121 formdata({ url: api.uploadClarmsImage, data: param }).then(res => { 123 formdata({ url: api.uploadClarmsImage, data: param }).then(res => {
122 item.fileName = res.content.fileName; 124 if (res && res.content && res.content.id) {
123 item.cacheKey = res.content.id; 125 item.fileName = res.content.fileName;
124 clearInterval(item.intervial); 126 item.cacheKey = res.content.id;
125 item.intervial = false; 127 clearInterval(item.intervial);
126 this.$set(this, "images", this.images); 128 item.intervial = false;
127 this.refreshUploadNumber(); 129 this.$set(this, "images", this.images);
130 this.refreshUploadNumber();
131 } else {
132 clearInterval(item.intervial);
133 item.intervial = false;
134 item.err = "失败";
135 this.$set(this, "images", this.images);
136 this.refreshUploadNumber();
137 }
128 }).catch(err => { 138 }).catch(err => {
129 clearInterval(item.intervial); 139 clearInterval(item.intervial);
130 item.intervial = false; 140 item.intervial = false;
131 item.err = "失败"; 141 item.err = "失败";
132 this.$set(this, "images", this.images); 142 this.$set(this, "images", this.images);
143 this.refreshUploadNumber();
133 }); 144 });
134 }, 145 },
135 refreshUploadNumber() { 146 refreshUploadNumber() {
...@@ -175,7 +186,7 @@ export default { ...@@ -175,7 +186,7 @@ export default {
175 if (this.uploading) { 186 if (this.uploading) {
176 return; 187 return;
177 } 188 }
178 let result = []; 189 let list = [];
179 let len = this.images.length; 190 let len = this.images.length;
180 if (len < 0) { 191 if (len < 0) {
181 return false; 192 return false;
...@@ -187,14 +198,17 @@ export default { ...@@ -187,14 +198,17 @@ export default {
187 } 198 }
188 // 结果 199 // 结果
189 let res = { 200 let res = {
190 seqNumber: index + 1,
191 cloudStorageID: d.cacheKey, 201 cloudStorageID: d.cacheKey,
192 imageFileName: this.options.imageFileName, 202 imageFileName: d.fileName,
193 imageMainTypeID: this.options.imageMainTypeID, 203 imageMainTypeID: this.options.imageMainTypeID,
194 imageTypeID: this.options.imageTypeID 204 imageTypeID: this.options.imageTypeID
195 } 205 }
196 result.push(res); 206 list.push(res);
197 } 207 }
208 let result = {
209 type: this.options.imageTypeID,
210 list: list
211 };
198 this.$emit("success", result); 212 this.$emit("success", result);
199 } 213 }
200 }, 214 },
......
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
7 <img class="clarms-icon" :src='icon'> 7 <img class="clarms-icon" :src='icon'>
8 <div class="clarms-title-container"> 8 <div class="clarms-title-container">
9 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div> 9 <div class="clarms-t1" :class="{clarmsActivty:images && images.length > 0}">{{options.name}}</div>
10 <div class="clarms-t2">已上传文件：{{uploadFiles}}</div> 10 <div class="clarms-t2">{{$t('clarms.step2.uploadFile')}}{{uploadFiles}}</div>
11 </div> 11 </div>
12 </div> 12 </div>
13 <div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile"> 13 <div class="clarms-btn" :class="{disabled:uploading}" @click="selectMutilFile">
14 上传 14 {{$t('clarms.step2.btnUpload')}}
15 </div> 15 </div>
16 </div> 16 </div>
17 <div v-if="images && images.length > 0"> 17 <div v-if="images && images.length > 0">
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7
8 import { getPolicyIdTypeList } from '@/utils/biz.js';
9 import Vue from 'vue';
10 import DatePicker from '@/components/date-picker/date-picker.vue';
11 import { Loading } from 'vant';
12 import { Selector, Options } from 'element-ui';
13 Vue.use(Loading);
14
15 export default {
16 data() {
17 return {
18 birthdayIllegal: false,
19 loading: false,
20 showTips: false,
21 data: {
22 // firstName: "玛丽",
23 // lastName: "何",
24 // birthDate: "1999-07-15",
25 // idNo: "H4099030",
26 // idType: "40"
27
28 firstName: "",
29 lastName: "",
30 birthDate: "",
31 idNo: "",
32 idType: ""
33 }
34 }
35 },
36 components: {
37 DatePicker
38 },
39 computed: {
40 i18n() {
41 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
42 },
43 policyIdTypeList() {
44 return getPolicyIdTypeList(this.$i18n.locale);
45 },
46 btnDisabled() {
47 let b1 = this.data.firstName ? false : true;
48 let b2 = this.data.lastName ? false : true;
49 let b3 = this.data.birthDate ? false : true;
50 let b4 = this.data.idType ? false : true;
51 let b5 = this.data.idNo ? false : true;
52 let b6 = this.birthdayIllegal;
53 return b1 || b2 || b3 || b4 || b5 || b6;
54 }
55 },
56 methods: {
57 initData() {
58
59 },
60 checkDate(data) {
61 this.birthdayIllegal = data.disable;
62 },
63 toRegisterPage() {
64 this.$router.push({
65 path: "/register"
66 });
67 },
68 toLoginPage() {
69 this.$router.push({
70 path: "/login"
71 });
72 },
73 toContactUs() {
74 this.$router.push({
75 path: "/custom/service?q=m1"
76 });
77 },
78 handleConfirm() {
79 if (this.btnDisabled) {
80 return;
81 }
82 if (this.loading) {
83 return;
84 }
85 this.loading = true;
86 httpPost({ url: api.getCidByVerify, data: this.data }).then(res => {
87 if (res) {
88 let cid = res;
89 httpPost({ url: api.clarmsCustomerList, data: { cid: cid } }).then(res => {
90 this.loading = false;
91 if (res && res.insuredInfoList && res.insuredInfoList.length > 0) {
92 sessionStorage.setItem("clarmsRequestCid", cid);
93 this.$emit("insuredInfoList", { cid: cid, list: res.insuredInfoList });
94 } else {
95 this.showTips = true;
96 }
97 }).catch(e => {
98 this.loading = false;
99 this.showTips = true;
100 });
101 } else {
102 this.loading = false;
103 this.showTips = true;
104 }
105 }).catch(e => {
106 this.loading = false;
107 });
108 }
109 },
110 watch: {
111 'data.firstName': function () {
112 this.showTips = false;
113 },
114 'data.lastName': function () {
115 this.showTips = false;
116 },
117 'data.birthDate': function () {
118 this.showTips = false;
119 },
120 'data.idNo': function () {
121 this.showTips = false;
122 },
123 'data.idType': function () {
124 this.showTips = false;
125 },
126 },
127 mounted() {
128 this.initData();
129 },
130 created() { }
131 }
1 @import '@/styles/_support'; 1 @import '@/styles/_support';
2 2
3 input { 3
4 padding: 0 2.083333rem;
5 color: #333333;
6 }
7
8 .orange { 4 .orange {
9 color: $cOrange; 5 color: $cOrange;
10 } 6 }
...@@ -17,14 +13,15 @@ input { ...@@ -17,14 +13,15 @@ input {
17 background: url("~@assets/images/vhis/vhis-btn.png"); 13 background: url("~@assets/images/vhis/vhis-btn.png");
18 background-size: 100% 100%; 14 background-size: 100% 100%;
19 background-repeat: no-repeat; 15 background-repeat: no-repeat;
20 width: 15rem; 16 width: 18rem;
21 height: 2.5rem; 17 height: 3rem;
22 line-height: 2.5rem; 18 line-height: 3rem;
23 color: white; 19 color: white;
24 font-weight: 600; 20 font-weight: 600;
25 cursor: pointer; 21 cursor: pointer;
26 margin: 2.5rem auto; 22 margin: 2.5rem auto;
27 text-align: center; 23 text-align: center;
24 border-radius: 1.666667rem;
28 } 25 }
29 26
30 .reservation-container { 27 .reservation-container {
...@@ -41,7 +38,7 @@ input { ...@@ -41,7 +38,7 @@ input {
41 margin: 1.666667rem auto 0 auto; 38 margin: 1.666667rem auto 0 auto;
42 39
43 span { 40 span {
44 padding: 0 .166667rem; 41 margin: 0 .333333rem ;
45 } 42 }
46 } 43 }
47 44
...@@ -69,6 +66,21 @@ input { ...@@ -69,6 +66,21 @@ input {
69 margin-left: .833333rem; 66 margin-left: .833333rem;
70 } 67 }
71 } 68 }
69
70 .tips {
71 align-items: center;
72 justify-content: center;
73 display: flex;
74
75 .icon {
76 margin-right: 5px;
77 display: inline-block;
78 }
79
80 .btn {
81 color: $cOrange;
82 }
83 }
72 } 84 }
73 85
74 86
...@@ -93,7 +105,7 @@ input { ...@@ -93,7 +105,7 @@ input {
93 border-radius: .416667rem ; 105 border-radius: .416667rem ;
94 height: 3rem; 106 height: 3rem;
95 align-items: center; 107 align-items: center;
96 padding-left: .833333rem; 108 padding: 0 2rem;
97 } 109 }
98 110
99 &-item { 111 &-item {
...@@ -106,7 +118,7 @@ input { ...@@ -106,7 +118,7 @@ input {
106 .label { 118 .label {
107 display: flex; 119 display: flex;
108 align-items: center; 120 align-items: center;
109 min-width: 30%; 121 width: 30%;
110 justify-content: flex-start; 122 justify-content: flex-start;
111 padding-left: 5px; 123 padding-left: 5px;
112 letter-spacing: .25rem; 124 letter-spacing: .25rem;
......
1 <template> 1 <template>
2 <div class="reservation-container"> 2 <div class="reservation-container">
3 <div class="title"><u><span class="pointer">{{$t('clarms.step1.register')}}</span>/<span class="pointer">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div> 3 <div class="title"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div> 4 <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
5 <div class="gird-g form default-mt"> 5 <div class="gird-g form default-mt">
6 <div class="pure-u-1 pure-u-md-1-2 form-item"> 6 <div class="pure-u-1 pure-u-md-1-2 form-item">
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 {{$t('clarms.step1.label1')}} 8 {{$t('clarms.step1.label1')}}
9 </div> 9 </div>
10 <div class="ipt-wrap"> 10 <div class="ipt-wrap">
11 <input class="ipt" type="text" v-model="data.name"> 11 <input class="ipt" type="text" v-model="data.lastName">
12 </div> 12 </div>
13 </div> 13 </div>
14 14
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 {{$t('clarms.step1.label2')}} 17 {{$t('clarms.step1.label2')}}
18 </div> 18 </div>
19 <div class="ipt-wrap"> 19 <div class="ipt-wrap">
20 <input class="ipt" type="text" v-model="data.name"> 20 <input class="ipt" type="text" v-model="data.firstName">
21 </div> 21 </div>
22 </div> 22 </div>
23 23
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
27 </div> 27 </div>
28 <div class="ipt-wrap"> 28 <div class="ipt-wrap">
29 <div class="down-arrow"></div> 29 <div class="down-arrow"></div>
30 <select class="ipt" v-model="data.reservationType"> 30 <el-select class="ipt" v-model="data.idType" :placeholder="$t('clarms.step2.placeHolder1')">
31 <option v-for="(item,index) in reservationTypes" :key="index" :value="item.value">{{item.name}}</option> 31 <el-option v-for="(item, index) in policyIdTypeList" :key="index" :label="item.n" :value="item.v"></el-option>
32 </select> 32 </el-select>
33 </div> 33 </div>
34 </div> 34 </div>
35 35
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 {{$t('clarms.step1.label4')}} 38 {{$t('clarms.step1.label4')}}
39 </div> 39 </div>
40 <div class="ipt-wrap"> 40 <div class="ipt-wrap">
41 <input class="ipt" type="text" v-model="data.name"> 41 <input class="ipt" type="text" v-model="data.idNo">
42 </div> 42 </div>
43 </div> 43 </div>
44 44
...@@ -48,11 +48,21 @@ ...@@ -48,11 +48,21 @@
48 </div> 48 </div>
49 <div class="ipt-wrap"> 49 <div class="ipt-wrap">
50 <div class="down-arrow"></div> 50 <div class="down-arrow"></div>
51 <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker> 51 <date-picker class="ipt-date" v-model="data.birthDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', padding:'0', color:'#606266'}"></date-picker>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 <div class="submit-btn">{{$t('clarms.step1.btn')}}</div> 55 <div class="submit-btn pointer flex-center" @click="handleConfirm" :class="{disabled : btnDisabled}">
56 <van-loading v-if="loading" />
57 <span>{{$t('clarms.step1.btn')}}</span>
58 </div>
59 <div class="tips" v-if="showTips">
60 <img class="icon" src="@/assets/images/common/icon-alert-i.png" alt="">
61 <div class="txt">
62 {{$t('customService.insuranceQuery.noPolicy')}}
63 <span class="pointer btn" @click="toContactUs">{{$t('customService.insuranceQuery.customService')}}</span>
64 </div>
65 </div>
56 </div> 66 </div>
57 </template> 67 </template>
58 68
......
1 import api from '@/api/api'
2 import {
3 httpGet,
4 httpPost,
5 formdata
6 } from '@/api/fetch-api.js'
7
8 import DatePicker from '@/components/date-picker/date-picker.vue';
9 import ClarmsUpload from './clarms-plugins-upload.vue';
10 import Vue from 'vue';
11 import { Loading, List } from 'vant';
12 import { Select, Option } from 'element-ui';
13
14 Vue.use(Loading);
15 Vue.use(Select);
16 Vue.use(Option);
17
18 export default {
19 props: {
20 // 是否显示组件
21 insuredList: {
22 type: Array,
23 default() {
24 return []
25 }
26 }
27 },
28 data() {
29 return {
30 uploadFiles: 0,
31 typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
32 typeSelected: [], // 已经选择的类型,
33 images: [],
34 agress: false,
35 data: {
36 contactDate: "",
37 insured: {}
38 },
39 contactDateError: false
40 }
41 },
42 components: {
43 DatePicker,
44 ClarmsUpload
45 },
46 computed: {
47 i18n() {
48 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
49 },
50 },
51 methods: {
52 initData() {
53 console.log("this.insuredList = " , this.insuredList);
54 },
55 typeClickHandle(t) {
56 let index = this.typeSelected.indexOf(t);
57 if (index > -1) {
58 this.typeSelected.splice(index, 1);
59 } else {
60 this.typeSelected.push(t);
61 }
62 },
63 uploadSuccess(data) {
64 console.log(data);
65 },
66 checkDate(data) {
67 this.contactDateError = data.disable;
68 if (this.contactDateError) {
69
70 }
71 },
72 toContact() {
73 this.$router.push({
74 path: "/custom/service?q=m1"
75 });
76 },
77 },
78 watch: {
79
80 },
81 mounted() {
82 this.initData();
83 },
84 created() { }
85 }
...@@ -10,8 +10,10 @@ import { ...@@ -10,8 +10,10 @@ import {
10 httpPost 10 httpPost
11 } from '@/api/fetch-api.js' 11 } from '@/api/fetch-api.js'
12 12
13 import ClarmsVerifyForm from './clarms-plugins-verifyform.vue'; 13 import ClarmsModalOne from '@/components/clarms/clarms-plugins-modal1.vue';
14 import ClarmsMaterial from './clarms-plugins-material.vue'; 14 import ClarmsModalTwo from '@/components/clarms/clarms-plugins-modal2.vue';
15 import ClarmsVerifyForm from '@/components/clarms/clarms-plugins-verifyform.vue';
16 import ClarmsMaterial from '@/components/clarms/clarms-plugins-material.vue';
15 17
16 // 用户没有登录 18 // 用户没有登录
17 // 校验成功 19 // 校验成功
...@@ -26,6 +28,8 @@ export default { ...@@ -26,6 +28,8 @@ export default {
26 data() { 28 data() {
27 return { 29 return {
28 step: 0, // 1是表单；2是报案页面 30 step: 0, // 1是表单；2是报案页面
31 showModal1: false,
32 showModal2: false,
29 agress: false, 33 agress: false,
30 reservationTypes: [], 34 reservationTypes: [],
31 cid: false, 35 cid: false,
...@@ -35,7 +39,9 @@ export default { ...@@ -35,7 +39,9 @@ export default {
35 }, 39 },
36 components: { 40 components: {
37 ClarmsVerifyForm, 41 ClarmsVerifyForm,
38 ClarmsMaterial 42 ClarmsMaterial,
43 ClarmsModalOne,
44 ClarmsModalTwo
39 }, 45 },
40 computed: { 46 computed: {
41 ...mapState({ 47 ...mapState({
...@@ -92,15 +98,26 @@ export default { ...@@ -92,15 +98,26 @@ export default {
92 this.step = 1; 98 this.step = 1;
93 }); 99 });
94 }, 100 },
101 handleInsuredInfo(data) {
102 this.cid = data.cid;
103 this.customerList = data.list;
104 this.step = 2;
105 },
106 handleShowModal(modalIndex) {
107 console.log(modalIndex);
108 if (modalIndex == 1) {
109 this.showModal1 = true;
110 } else if (modalIndex == 2) {
111 this.showModal2 = true;
112 }
113 },
95 logoutAction() { 114 logoutAction() {
96 console.log("logoutAction");
97 this.sid = false; 115 this.sid = false;
98 this.hadQueryCustomerList = false; 116 this.hadQueryCustomerList = false;
99 this.customerList = []; 117 this.customerList = [];
100 this.step = 1; 118 this.step = 1;
101 }, 119 },
102 loginAction() { 120 loginAction() {
103 console.log("loginAction");
104 this.sid = false; 121 this.sid = false;
105 this.hadQueryCustomerList = false; 122 this.hadQueryCustomerList = false;
106 this.customerList = []; 123 this.customerList = [];
......
1 1
2 <template> 2 <template>
3 <div class="mobile-margin"> 3 <div>
4 <clarms-modal-one v-if="showModal1" @close="showModal1 = false"></clarms-modal-one>
5 <clarms-modal-two v-if="showModal2" @close="showModal2 = false"></clarms-modal-two>
6 <div class="mobile-margin">
4 7
5 <template v-if="step == 1"> 8 <template v-if="step == 1">
6 <clarms-verify-form></clarms-verify-form> 9 <clarms-verify-form @insuredInfoList="handleInsuredInfo"></clarms-verify-form>
7 </template> 10 </template>
8 11
9 <template v-if="step == 2"> 12 <template v-if="step == 2">
10 <clarms-material :insuredList="customerList"></clarms-material> 13 <clarms-material :insuredList="customerList" :cid="cid" @showModal="handleShowModal"></clarms-material>
11 </template> 14 </template>
15 </div>
12 </div> 16 </div>
13 </template> 17 </template>
14 18
......
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
3 3
4 4
5 input { 5 input {
6 padding: 0 2.083333rem; 6 padding: 0 2rem;
7 color: #333333;
8 } 7 }
9 8
10 .top-space {} 9 .top-space {}
......
...@@ -73,3 +73,13 @@ ...@@ -73,3 +73,13 @@
73 background-image: none !important; 73 background-image: none !important;
74 box-shadow: none !important; 74 box-shadow: none !important;
75 } 75 }
76
77 .flex-center {
78 display: flex;
79 justify-content: center;
80 align-items: center;
81 }
82
83 input {
84 color:'#606266'
85 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -37,7 +37,8 @@ $cGreen:#006441; ...@@ -37,7 +37,8 @@ $cGreen:#006441;
37 $cGray:#bfbfbf; 37 $cGray:#bfbfbf;
38 $cGray2:#494949; 38 $cGray2:#494949;
39 $cDark:#dcdcdc; 39 $cDark:#dcdcdc;
40 $cLightBlack:#333333; 40 $cLightBlack:#606266;
41 $cDisabled:#888888;
41 42
42 // 文章宽度 43 // 文章宽度
43 $articleWidth:1041px; 44 $articleWidth:1041px;
......