clarms-plugins-material.vue 6.36 KB
<template>

  <div class="reservation-container-2">
    <div class="title default-mt">
      <span>{{$t('clarms.step2.label1')}}</span>
      <div class="clarms-border">
        <el-select v-model="data.insured">
          <el-option v-for="(item,index) in insuredList" :key="index" :label="item.insuredNameCn" :value="item.insuredNameCn">
          </el-option>
        </el-select>
      </div>
      <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>