Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
8da1eaf7 by joe
Options

简易理赔

1 parent 34259a6a
Inline Side-by-side
Showing 18 changed files with 920 additions and 9 deletions
......@@ -831,5 +831,50 @@ module.exports = {
tip2: "hereby confirmed that",
tip3: "collection of the above policies",
tip4: "I would like to contact customer service"
},
clarms: {
step1: {
register: "Register",
login: "Login",
t1: "Ping An UniAccount that we can provide you with better services",
label0: "Claimant information",
label1: "Last name",
label2: "First name",
label3: "Document type",
label4: "Identification Number",
label5: "Birthday",
btn: "Confirm"
},
step2: {
label1: "I want to",
label2: "Claim for compensation",
label3: "Application type",
label4: "(Multiple choice)",
op1: "Accident medical treatment",
op2: "Accidental death",
op3: "Disease medical treatment",
op4: "Death of illness",
op5: "Major diseases",
label5: "Please fill in the amount of this visit.",
label6: "Amount of this visit",
label7: "(HKD)",
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.",
label9: "Accident time",
label10: "Must transmit information",
label11: "Expense receipt and list",
label12: "Medical records",
label13: "Biography data",
label14: "Hospital diagnosis report",
label15: "Account information of claimant",
label16: "Other",
label17: "Statement of authorization:",
label18: "Statement of personal data collection:",
btn: "Confirm",
contact: "I would like to contact customer service",
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.",
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.",
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.",
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."
}
}
}
......
......@@ -826,5 +826,50 @@ module.exports = {
tip2: "現確認於",
tip3: "收托上述保單",
tip4: "我想聯絡客服"
},
clarms: {
step1: {
register: "註冊",
login: "登入",
t1: "一賬通以便我們為您提供更好的服務",
label0: "索償人資訊",
label1: "姓",
label2: "名",
label3: "證件類型",
label4: "證件號碼",
label5: "出生日期",
btn: "立即申請"
},
step2: {
label1: "我想為",
label2: "申請索賠",
label3: "申請類型",
label4: "（可多選）",
op1: "意外醫療",
op2: "意外身故",
op3: "疾病醫療",
op4: "疾病身故",
op5: "重大疾病",
label5: "請填寫本次就診金額。",
label6: "本次就診金額",
label7: "（港幣）",
label8: "如就診時支付非港幣，請折算為港幣後填寫金額。",
label9: "事故時間",
label10: "必傳資料",
label11: "費用收據及清單",
label12: "病歷資料",
label13: "選傳資料",
label14: "醫院診斷報告",
label15: "索償人賬戶資料",
label16: "其他",
label17: "授權聲明：",
label18: "收集個人資料聲明：",
btn: "提交",
contact: "我想聯絡客服",
tip1 : "本人/我們謹此授權（1）任何雇主、注册西醫、醫院、診所、保險公司、銀行、政府機構、或其他機構、組織或人士、凡知道或持有任何有關保單持有人/受保人之紀錄者，均可將該等資料提供、發放及轉交給中國平安人壽保險（香港）有限公司；（2）貴公司或任何其指定之醫生或化驗所，可就此賠償申請替保單持有人/受保人進行所需之醫療評估及測試，作為稽核保單持有人/受保人之健康狀況。此授權對保單持有人/受保人之繼承人及授讓人具有約束力；即使保單持有人/受保人死亡或無行為能力時，此授權書仍具效力。",
tip2 : "本人/我們確認已閱讀及明白「中國平安人壽保險（香港）有限公司」的收集個人資料聲明（本聲明）。",
tip3 : "本人/我們特此確認並同意貴公司根據本聲明使用和移轉本人/我們的個人資料，包括為直接促銷之目的使用和提供本人/我們的個人資料。本人/我們確認並同意為本聲明中所述之目的將本人/我們的個人資料移轉至香港境外給本聲明所述的承轉人的類別。",
tip4 : "本人/我們謹此聲明上述一切陳述及資料，就本人/我們所知所信，均為事實之全部並確實無訛。"
}
}
}
......
......@@ -828,5 +828,50 @@ module.exports = {
tip2: "现确认于",
tip3: "受托上述保单",
tip4: "我想联络客服"
},
clarms: {
step1: {
register: "注册",
login: "登入",
t1: "一账通以便我们为您提供更好的服务",
label0: "索偿人信息",
label1: "姓",
label2: "名",
label3: "证件类型",
label4: "证件号码",
label5: "出生日期",
btn: "立即申请"
},
step2: {
label1: "我想为",
label2: "申请索赔",
label3: "申请类型",
label4: "（可多選）",
op1: "意外医疗",
op2: "意外身故",
op3: "疾病医疗",
op4: "疾病身故",
op5: "重大疾病",
label5: "请填写本次就诊金额。",
label6: "本次就诊金额",
label7: "（港币）",
label8: "如就诊时支付非港币，请折算为港币后填写金额。",
label9: "事故时间",
label10: "必传资料",
label11: "费用收录及清单",
label12: "病例资料",
label13: "选传资料",
label14: "医院诊断报告",
label15: "索偿人账户资料",
label16: "其他",
label17: "授权声明：",
label18: "收集个人资料声明：",
btn: "提交",
contact: "我想联络客服",
tip1: "本人/我们谨此授权（1）任何雇主、注册西医、医院、诊所、保险公司、银行、政府机构、或其他机构、组织或人士、凡知道或持有任何有关保单持有人/受保人之纪录者，均可将该等数据提供、发放及转交给中国平安人寿保险（香港）有限公司；（2）贵公司或任何其指定之医生或化验所，可就此赔偿申请替保单持有人/受保人进行所需之医疗评价及测试，作为审核保单持有人/受保人之健康状况。此授权对保单持有人/受保人之继承人及授让人具有约束力；即使保单持有人/受保人死亡或无行为能力时，此授权书仍具效力。",
tip2: "本人/我们确认已阅读及明白「中国平安人寿保险（香港）有限公司」的收集个人资料声明（本声明）。",
tip3: "本人/我们特此确认并同意贵公司根据本声明使用和移转本人/我们的个人资料，包括为直接促销之目的使用和提供本人/我们的个人资料。本人/我们确认并同意为本声明中所述之目的将本人/我们的个人资料移转至香港境外给本声明所述的承转人的类别。",
tip4: "本人/我们谨此声明上述一切陈述及数据，就本人/我们所知所信，均为事实之全部并确实无讹。"
}
}
}
......
......@@ -26,14 +26,14 @@ export default {
// today : 当日不可选择
filtModel: {
type: Array,
default () {
default() {
return ["history", "weekend", "today"]
}
},
// 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"]
filterDates: {
type: Array,
default () {
default() {
return [] // ["2019-11-26", "2019-11-28"]
}
},
......@@ -60,6 +60,10 @@ export default {
type: Function,
default: null
},
showStyle: {
type: Boolean,
default: true
},
},
data() {
return {
......@@ -405,7 +409,7 @@ export default {
this.month = Number(ymd[1]);
this.date = Number(ymd[2]);
isInit = true;
} catch (e) {}
} catch (e) { }
}
}
if (!isInit) {
......@@ -441,7 +445,7 @@ export default {
}
},
mounted() {},
mounted() { },
created() {
this.initData();
},
......
......@@ -3,7 +3,7 @@
<div class="comp">
<div class="date-mask" v-if="visible" @click="showCalendar()"></div>
<div class="ipt-wrap" :class="{'readonly':readonly}">
<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" class="ipt" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')">
<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" :class="{ipt: showStyle}" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')">
</div>
<div v-if="visible" class="date-wrap">
<div class="calendar-wrap">
......
......@@ -62,7 +62,7 @@
}
hr {
border-top: 1px solid #e4e4e5;
border-top: .083333rem solid #e4e4e5;
width: 70%;
margin: auto;
}
......@@ -153,7 +153,7 @@
}
hr {
border-top: 1px solid #e4e4e5;
border-top: .083333rem solid #e4e4e5;
width: 80%;
margin: auto;
}
......@@ -181,7 +181,7 @@
}
hr {
border-top: 1px solid #e4e4e5;
border-top: .083333rem solid #e4e4e5;
width: 90% ;
margin: auto;
}
......
import api from '@/api/api'
import {
httpGet,
httpPost
} from '@/api/fetch-api.js'
import DatePicker from '@/components/date-picker/date-picker.vue';
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);
export default {
data() {
return {
step: 2, // 1是表单；2是报案页面
typeSelected: [], // 已经选择的类型,
typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
agress: false,
data: {
contactDate: ""
},
reservationTypes: []
}
},
components: {
DatePicker
},
computed: {
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
initData() {
},
checkDate(data) {
this.contactDateError = data.disable;
if (this.contactDateError) {
}
},
typeClickHandle(t) {
let index = this.typeSelected.indexOf(t);
if (index > -1) {
this.typeSelected.splice(index, 1);
} else {
this.typeSelected.push(t);
}
}
},
watch: {
},
mounted() {
this.initData();
},
created() { }
}
......
@import '@/styles/_support';
input {
padding: 0 2.083333rem;
color: #333333;
}
.orange {
color: $cOrange;
}
.gray {
color: #747474;
}
.submit-btn{
background: url("~@assets/images/vhis/vhis-btn.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 15rem;
height: 2.5rem;
line-height: 2.5rem;
color: white;
font-weight: 600;
cursor: pointer;
margin: 2.5rem auto;
text-align: center;
}
.reservation-container {
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 2.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
color: $cOrange;
text-align: center;
margin: 1.666667rem auto 0 auto;
span {
padding: 0 .166667rem;
}
}
.default-mt {
margin-top: 2.666667rem;
}
.flex-top {
display: flex;
justify-content: left;
align-items: flex-start;
}
.flex-start {
display: flex;
justify-content: left;
align-items: flex-start;
flex-wrap: wrap;
}
.check-item {
display: flex;
align-items: center;
span {
margin-left: .833333rem;
}
}
}
.reservation-container-2 {
@extend .bb;
border-radius: .666667rem;
border: solid .083333rem $cOrange;
background-color: #ffffff;
padding: 1.666667rem 10rem 2.833333rem 10rem;
.title {
font-size: 1.333333rem;
color: $cOrange;
text-align: center;
margin: 1.666667rem auto 0 auto;
select {
padding: 0 1.25rem ;
border: none;
border-bottom: .083333rem solid #666666;
color: #666666;
}
}
.default-mt {
margin-top: 2.666667rem;
}
.submit-btn{
margin: 2.5rem auto 1rem;
}
.flex-top {
display: flex;
justify-content: left;
align-items: flex-start;
}
.flex-start {
display: flex;
justify-content: left;
align-items: flex-start;
flex-wrap: wrap;
}
.check-item {
display: flex;
align-items: center;
margin-right: 2rem;
margin-bottom: .833333rem;
span {
margin-left: .833333rem;
}
img {
width: 1.666667rem ;
}
}
.item-group {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.ml10 {
margin-left: .833333rem;
}
.mt20 {
margin-top: 1.666667rem;
}
.mt10 {
margin-top: .833333rem;
}
.upload-item {
.tip {
color: $cOrange;
font-size: 1rem;
margin-top: .833333rem ;
text-align: center;
width: 8.333333rem ;
}
.upload-icon-1 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon1.png");
background-size: 100% 100%;
}
.upload-icon-2 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon2.png");
background-size: 100% 100%;
}
.upload-icon-3 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon3.png");
background-size: 100% 100%;
}
.upload-icon-4 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon4.png");
background-size: 100% 100%;
}
.upload-icon-5 {
width: 8.333333rem ;
height: 8.333333rem ;
background: url("~@/assets/images/clarms/icon5.png");
background-size: 100% 100%;
}
}
.bottom-tip {
font-size: .833333rem ;
display: flex;
align-items: center;
span {
margin-left: 1.3rem;
}
img {
width: 1.3rem;
}
}
hr {
border-top: 1px solid #eee;
margin-top: 2.5rem ;
}
.tips {
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: .833333rem;
}
span {
font-size: 1rem ;
margin-left: .833333rem;
color: $cOrange;
}
}
.contact {
text-align: center;
cursor: pointer;
color: $cOrange;
font-weight: 600;
}
}
.form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-name {
font-size: 1.333333rem ;
font-weight: 600;
text-align: left;
color: $cOrange;
padding-left: 15px;
}
&-item {
width: 50%;
display: flex;
justify-content: center;
padding: 0 $marginSmall;
margin-bottom: 1.333333rem;
.label {
display: flex;
align-items: center;
min-width: 30%;
justify-content: flex-start;
padding-left: 5px;
letter-spacing: .25rem;
}
.ipt-wrap {
width: 70%;
position: relative;
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
height: 3rem;
display:flex;
align-items: center;
}
// 长文本
.textarea {
min-height: 8.75rem;
@extend .bb;
padding: .75rem;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
pointer-events: none;
cursor: default;
}
}
.validator {
color: $cOrange;
margin-top: 0.5rem;
position: absolute;
right: 1rem;
display: flex;
align-items: center;
// bottom: 0;
img {
display: inline-block;
margin-right: 0.4rem;
}
}
}
&-item-2 {
width: 100%;
display: flex;
justify-content: flex-start;
padding: 0 $marginSmall;
margin-bottom: 1.333333rem;
.label {
align-items: center;
width: 25%;
padding-left: 5px;
letter-spacing: .25rem;
.main-label {
color: $cOrange;
}
}
.value {
width: 75%;
position: relative;
.ipt-wrap {
// input和下拉
.ipt {
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
height: 3rem;
display:flex;
align-items: center;
}
.ipt2 {
width: 100%;
border-bottom: 1px solid #ccc;
height: 3rem;
display:flex;
align-items: center;
margin-bottom: .833333rem ;
}
// 长文本
.textarea {
min-height: 8.75rem;
@extend .bb;
padding: .75rem;
}
.down-arrow {
z-index: 10;
position: absolute;
top: 1.3rem;
right: 1.2rem;
background-image: url('~@/assets/images/reservation/re-down-arrow-2.png');
background-size: 100% 100%;
width: .633333rem;
height: .433333rem;
pointer-events: none;
cursor: default;
}
}
}
}
}
.notice {
margin-top: 4rem;
@extend .bb;
padding: 0 1rem;
&-item {
position: relative;
line-height: 2;
letter-spacing: 1.2px;
margin-bottom: 1rem;
&-icon {
width: 1.166667rem;
position: absolute;
top: .6rem;
}
}
}
// .submit-btn {
// width: 13.583333rem;
// height: 4.083333rem;
// margin: 2.5rem auto;
// line-height: 4.083333rem;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
// text-align: center;
// font-size: $fontSize;
// letter-spacing: .129167rem;
// color: #ffffff;
// border-radius: 3.5rem;
// cursor: pointer;
// border: none;
// color: #ffffff;
// background-color: $cOrange;
// box-shadow: 0px 10px 13px 0 rgba(236, 100, 41, 0.2);
// background-blend-mode: soft-light, ;
// background-image: linear-gradient(to bottom, #ec6429, #ec6429), linear-gradient(to top, #000000, #ffffff);
// // background-image: linear-gradient(to top, #000000, #ffffff), linear-gradient(to bottom, #ec6429, #ec6429);
// }
@media (max-width: 1200px) {
.mobile-margin {
margin-top: 2.5rem;
}
}
@media (max-width: 1000px) {
.reservation-container-2 {
padding: 1.666667rem 2rem 2.833333rem 2rem;
}
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
}
}
}
@media (max-width: 600px) {
.reservation-container {
padding: 2.666667rem 2rem 2.833333rem 2rem;
}
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
}
&-item2 {
display: block;
.ipt-wrap {
margin: 0;
}
}
&-item-2 {
.label {
width: 30%;
}
.value {
width: 70%;
}
}
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
width: 100%;
}
}
}
.notice {
margin: 0;
}
}
......
<template>
<div style="height:500px;"></div>
<div class="mobile-margin">
<div class="reservation-container" v-if="step == 1">
<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>
<div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
<div class="gird-g form default-mt">
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
{{$t('clarms.step1.label1')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" v-model="data.name">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
{{$t('clarms.step1.label2')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" v-model="data.name">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
{{$t('clarms.step1.label3')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<select class="ipt" v-model="data.reservationType">
<option v-for="(item,index) in reservationTypes" :key="index" :value="item.value">{{item.name}}</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
{{$t('clarms.step1.label4')}}
</div>
<div class="ipt-wrap">
<input class="ipt" type="text" v-model="data.name">
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item">
<div class="label">
{{$t('clarms.step1.label5')}}
</div>
<div class="ipt-wrap">
<div class="down-arrow"></div>
<date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker>
</div>
</div>
</div>
<div class="submit-btn">{{$t('clarms.step1.btn')}}</div>
</div>
<div class="reservation-container-2" v-if="step == 2">
<div class="title default-mt">
<span>{{$t('clarms.step2.label1')}}</span>
<select>
<option>陈小明</option>
</select>
<span>{{$t('clarms.step2.label2')}}</span>
</div>
<hr>
<div class="gird-g form default-mt">
<div class="pure-u-1 pure-u-md-1-2 form-item-2">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label3')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label4')}}</div>
</div>
<div class="value">
<div class="ipt-wrap item-group">
<div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
<img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op1')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
<img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op2')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('3') > -1" @click="typeClickHandle('3')">
<img v-if="typeSelected.indexOf('3') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op3')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('4') > -1" @click="typeClickHandle('4')">
<img v-if="typeSelected.indexOf('4') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op4')}}</span>
</div>
<div class="check-item pointer" v-if="typeCandidates.indexOf('5') > -1" @click="typeClickHandle('5')">
<img v-if="typeSelected.indexOf('5') > -1" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.op5')}}</span>
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label5')}}</span></div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label6')}}
</div>
<div class="sub-label">{{$t('clarms.step2.label7')}} </div>
</div>
<div>
<div class="value">
<div class="ipt-wrap">
<input class="ipt2" type="number">
</div>
</div>
<div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div>
<div class="value">
<div class="ipt-wrap item-group">
<div class="down-arrow"></div>
<date-picker class="ipt" v-model="data.contactDate" :check="checkDate" :showStyle="false"></date-picker>
</div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$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>
</div>
<div class="pure-u-1 pure-u-md-1-2 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div>
<div class="value" style="display:flex;">
<div class="upload-item pointer">
<div class="upload-icon-3"></div>
<div class="tip">{{$t('clarms.step2.label14')}}</div>
</div>
<div class="upload-item ml10 pointer">
<div class="upload-icon-4"></div>
<div class="tip">{{$t('clarms.step2.label15')}}</div>
</div>
<div class="upload-item ml10 pointer">
<div class="upload-icon-5"></div>
<div class="tip">{{$t('clarms.step2.label16')}}</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>
<div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
<div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>
<div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
<img v-if="agress" src="@/assets/images/clarms/checked.png">
<img v-else src="@/assets/images/clarms/uncheck.png">
<span>{{$t('clarms.step2.tip4')}}</span>
</div>
<div class="submit-btn">{{$t('clarms.step2.btn')}}</div>
<div class="contact">{{$t('clarms.step2.contact')}}</div>
</div>
</div>
</template>
<script src="./clarms.js"></script>
......