Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
7c06b389 by joe
Options

1

1 parent f7033f49
Inline Side-by-side
Showing 12 changed files with 1137 additions and 215 deletions
......@@ -19,6 +19,7 @@
"co": "^4.6.0",
"core-js": "^2.6.5",
"crypto-js": "^3.1.9-1",
"element-ui": "^2.13.0",
"glob": "^7.1.4",
"jsencrypt": "^3.0.0-rc.1",
"mockjs": "^1.0.1-beta3",
......
import api from '@/api/api'
import {
httpGet,
httpPost,
formdata
} from '@/api/fetch-api.js'
import DatePicker from '@/components/date-picker/date-picker.vue';
import ClarmsUpload from './clarms-plugins-upload.vue';
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);
export default {
data() {
return {
uploadFiles: 0,
typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
typeSelected: [], // 已经选择的类型,
images: [],
agress: false,
data: {
contactDate: "",
insured : {}
},
insuredList : [{name : "张三疯"}],
contactDateError : false
}
},
components: {
DatePicker,
ClarmsUpload
},
computed: {
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
initData() {
},
typeClickHandle(t) {
let index = this.typeSelected.indexOf(t);
if (index > -1) {
this.typeSelected.splice(index, 1);
} else {
this.typeSelected.push(t);
}
},
uploadSuccess(data){
console.log(data);
},
checkDate(data) {
this.contactDateError = data.disable;
if (this.contactDateError) {
}
},
toContact() {
this.$router.push({
path: "/custom/service?q=m1"
});
},
},
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-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;
}
.mr10 {
margin-right: .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 ;
letter-spacing: 1px;
}
.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;
}
.ipt-date {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
height: 3rem;
align-items: center;
padding-left: .833333rem;
}
&-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;
}
}
.date-container {
width: 60%;
position: relative;
}
.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;
}
}
}
@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%;
}
}
&-item-2 {
.date-container {
width: 80%;
}
}
}
}
@media (max-width: 600px) {
.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%;
}
.date-container {
width: 100%;
}
}
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
width: 100%;
}
}
}
.notice {
margin: 0;
}
}
@media (max-width: 400px) {
.reservation-container-2 {
padding: 1.666667rem 1rem;
}
}
\ No newline at end of file
<template>
<div class="reservation-container-2">
<div class="title default-mt">
<span>{{$t('clarms.step2.label1')}}</span>
<el-select v-model="data.insured">
<el-option v-for="(item,index) in insuredList" :key="index" :label="item.name" :value="item.name">
</el-option>
</el-select>
<span>{{$t('clarms.step2.label2')}}</span>
</div>
<hr>
<div class="gird-g form default-mt">
<div class="pure-u-1 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 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 class="value">
<div>
<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 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div class="value">
<div class="ipt-wrap date-container">
<div class="down-arrow"></div>
<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>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label10')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
</div>
</div>
</div>
<hr>
<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" @click="toContact">{{$t('clarms.step2.contact')}}</div>
</div>
</template>
<script src="./clarms-plugins-material.js"></script>
<style lang="scss" scoped>
@import "./clarms-plugins-material.scss";
</style>
\ No newline at end of file
......@@ -113,6 +113,12 @@
height: 2.5rem ;
}
}
.mask-bg-2 {
background-color: rgba($color: #000000, $alpha: .5) !important;
color: white !important;
font-size: 1rem;
}
}
.clarms-upload-tips {
......
......@@ -20,14 +20,18 @@
<div class="clarms-img-item-plugin" @mouseover="onOverHandler($event,item,index)" v-for="(item,index) in images" :key="index">
<div class="clarms-img-item">
<img class="clarms-img-cont" :src="item.data">
<div class="clarms-img-mask" v-if="item.showMask">
<div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err">
<img src="@/assets/images/clarms/close.png">
</div>
<div class="clarms-img-mask" v-if="item.showMask" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
<div class="clarms-img-mask" v-if="item.showMask && !item.intervial && !item.err" @mouseout="onOutHandler($event,item,index)" @click="removeItem(index)">
</div>
<div class="clarms-img-mask mask-bg-2" v-if="item.intervial">
Uploading{{item.tips}}
</div>
<div class="clarms-img-mask mask-bg-2" v-if="item.err" @click="removeItem(index)">
Uploading{{item.err}}
</div>
</div>
<div class="clarms-upload-tips" v-if="!item.cacheKey && !item.err">Uploading{{item.tips}}</div>
<div class="clarms-upload-tips" v-if="item.err">{{item.err}}</div>
</div>
</div>
<div class="clarms-empty-line"></div>
......@@ -38,7 +42,7 @@
</template>
<script src="./clarms-upload.js"></script>
<script src="./clarms-plugins-upload.js"></script>
<style lang="scss" scoped>
@import "./clarms-upload.scss";
@import "./clarms-plugins-upload.scss";
</style>
\ No newline at end of file
......
import api from '@/api/api'
import {
httpGet,
httpPost,
formdata
} from '@/api/fetch-api.js'
import Vue from 'vue';
import DatePicker from '@/components/date-picker/date-picker.vue';
import { Loading } from 'vant';
Vue.use(Loading);
export default {
data() {
return {
data : {},
reservationTypes: []
}
},
components: {
DatePicker
},
computed: {
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
},
methods: {
initData() {
},
checkDate(){
}
},
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;
}
}
}
.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;
}
.ipt-date {
width: 100%;
border: 1px solid $cOrange !important;
border-radius: .416667rem ;
height: 3rem;
align-items: center;
padding-left: .833333rem;
}
&-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;
}
}
.date-container {
width: 60%;
position: relative;
}
.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;
}
}
}
@media (max-width: 1200px) {
.mobile-margin {
margin-top: 2.5rem;
}
}
@media (max-width: 1000px) {
.form {
&-item {
width: 100%;
.label {
min-width: 30%;
}
.ipt-wrap {
width: 70%;
}
}
&-item-2 {
.date-container {
width: 80%;
}
}
}
}
@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%;
}
.date-container {
width: 100%;
}
}
&-item3 {
display: block;
.ipt-wrap {
margin: 0;
width: 100%;
}
}
}
.notice {
margin: 0;
}
}
<template>
<div class="reservation-container">
<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-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>
</div>
</div>
</div>
<div class="submit-btn">{{$t('clarms.step1.btn')}}</div>
</div>
</template>
<script src="./clarms-plugins-verifyform.js"></script>
<style lang="scss" scoped>
@import "./clarms-plugins-verifyform.scss";
</style>
\ No newline at end of file
......@@ -4,11 +4,8 @@ import {
httpPost
} from '@/api/fetch-api.js'
import DatePicker from '@/components/date-picker/date-picker.vue';
import ClarmsUpload from './clarms-upload.vue';
import Vue from 'vue';
import { Loading } from 'vant';
Vue.use(Loading);
import ClarmsVerifyForm from './clarms-plugins-verifyform.vue';
import ClarmsMaterial from './clarms-plugins-material.vue';
// 用户没有登录
// 校验成功
......@@ -23,8 +20,6 @@ export default {
data() {
return {
step: 2, // 1是表单；2是报案页面
typeSelected: [], // 已经选择的类型,
typeCandidates: ['1', '2', '3', '4', '5'], // 候选人所购买的保单可选择的类型
agress: false,
data: {
contactDate: ""
......@@ -33,8 +28,8 @@ export default {
}
},
components: {
DatePicker,
ClarmsUpload
ClarmsVerifyForm,
ClarmsMaterial
},
computed: {
i18n() {
......@@ -45,28 +40,6 @@ export default {
initData() {
},
uploadSuccess(data){
console.log(data);
},
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);
}
},
toContact() {
this.$router.push({
path: "/custom/service?q=m1"
});
},
},
watch: {
......
<template>
<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>
<template v-if="step == 1">
<clarms-verify-form></clarms-verify-form>
</template>
<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-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>
</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 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 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 class="value">
<div>
<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 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label9')}}
</div>
</div>
<div class="value">
<div class="ipt-wrap date-container">
<div class="down-arrow"></div>
<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>
</div>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label10')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
</div>
</div>
<div class="pure-u-1 form-item-2 mt20">
<div class="label">
<div class="main-label">
{{$t('clarms.step2.label13')}}
</div>
</div>
<div class="value">
<clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
<clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
</div>
</div>
</div>
<hr>
<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" @click="toContact">{{$t('clarms.step2.contact')}}</div>
</div>
<template v-if="step == 2">
<clarms-material></clarms-material>
</template>
</div>
</template>
......