<template> <div class="comp" :class="{'hide' : !visible }"> <div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div> <div class="modal"> <div class="modal-title"> {{$t('form.modalUploadCard.tit')}} <img @click="onCloseHandler()" class="close-btn pointer" :src="require('@assets/images/common/icon-modal-simple-close.png')"> </div> <div class="modal-content" v-if="showType == 'owner' || showType == 'both'"> <div class="gird-g upload"> <div class="pure-u-1 pure-u-md-1-2 upload-item"> <div class="tit"> {{$t('policyChangeInformation.owner')}} {{$t('form.modalUploadCard.front')}}</div> <img class="poster pointer" :src="ownerFrontPicSrc || require('@assets/images/common/card-front.png')" alt="" @click="handlePicSelect('ownerFront')"> </div> <div class="pure-u-1 pure-u-md-1-2 upload-item"> <div class="tit"> {{$t('policyChangeInformation.owner')}} {{$t('form.modalUploadCard.back')}}</div> <img class="poster pointer" :src="ownerBackPicSrc || require('@assets/images/common/card-back.png')" alt="" @click="handlePicSelect('ownerBack')"> </div> </div> </div> <div class="modal-content" v-if="showType == 'insured' || showType == 'both'"> <div class="gird-g upload"> <div class="pure-u-1 pure-u-md-1-2 upload-item"> <div class="tit"> {{$t('policyChangeInformation.insured')}} {{$t('form.modalUploadCard.front')}}</div> <img class="poster pointer" :src="insuredFrontPicSrc || require('@assets/images/common/card-front.png')" alt="" @click="handlePicSelect('insuredFront')"> </div> <div class="pure-u-1 pure-u-md-1-2 upload-item"> <div class="tit"> {{$t('policyChangeInformation.insured')}} {{$t('form.modalUploadCard.back')}}</div> <img class="poster pointer" :src="insuredBackPicSrc || require('@assets/images/common/card-back.png')" alt="" @click="handlePicSelect('insuredBack')"> </div> </div> </div> <div class="modal-btn-wrap"> <div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div> <div @click="onConfirmHandler()" v-if="showConfirm" class="btn" :class="{disabled: submitBtnDisabled}">{{confirmText}}</div> </div> </div> </div> </template> <script src="./modal-upload-card-comp.js"></script> <style lang="scss" scoped> @import "./modal-upload-card-comp.scss"; </style>