assess-app/pages/task/module/identity-item.vue

<template>
  <view class="identity-box">
    <view class="identity-item">
      <view class="item-img" @click="previewImage(identity_one)">
        <image v-if="identity_one"  :src="identity_one" mode="aspectFill"></image>
        <image v-else  src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/app-serve/2023-4-16/gk2xruydmj.png" mode="aspectFill"></image>
        <view class="img-text">身份证正面</view>
      </view>
      <view class="item-img" @click="previewImage(identity_two)">
        <image v-if="identity_two" :src="identity_two" mode="aspectFill"></image>
        <image v-else src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/app-serve/2023-4-16/gk2xsr9ud6.png" mode="aspectFill"></image>
        <view class="img-text">身份证反面</view>
      </view>
    </view>

  </view>
</template>

<script>


export default {
  name: "identity-item",
  components: {},
  props: {
    'identityOne':{
      default:'',
    },
    'identityTwo':{
      default:'',
    },

  },
  data() {
    return {
      identity_one:'',
      identity_two:'',

    }
  },
  watch: {
    'identityOne':function (){
      this.setIdentityOne()
    },
    'identityTwo':function (){
      this.setIdentityTwo()
    }
  },
  mounted() {
    this.setIdentityOne()
    this.setIdentityTwo()
  },
  methods: {
    previewImage(img){
      this.$emit('onShowImg',img)
    },
    setIdentityOne(){
      if(this.identityOne){
        if(this.identityOne!==this.identity_one){
          this.identity_one=this.identityOne
        }
      }
    },
    setIdentityTwo(){
      if(this.identityTwo){
        if(this.identityTwo!==this.identity_two){
          this.identity_two=this.identityTwo
        }
      }
    },
    closePopup(e){
      if(e.show===false){
        this.isUploading=false
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "static/css/common/wh-common";
.identity-box{
  .identity-title{
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
    font-weight: 400;
  }
  .identity-item{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    .item-img{
      width: calc(50% - 9rpx);
      image{
        width:100%;
        height: 190rpx;
        border-radius: 6rpx;
      }
      .img-text{
        margin-top: 19rpx;
        text-align: center;
        color: #232A35;
        font-size: 24rpx;
        font-weight: 400;

      }
    }
  }

}

</style>