gdy_qywx_pc/src/components/user_image.vue

<template>
  <div>
    <el-image
      v-if="info.img_url"
      :src="info.img_url == defaultImg() ? replaceImg() : info.img_url"
      :style="{width: width, height: height}"
      style="border-radius: 50%"
      fit="fill"
    >
      <div slot="error" class="image-slot">
        <i class="el-icon-picture"></i>
      </div>
    </el-image>
    <span class="img_round" v-else>
      <div class="user_name_div" :style="{width: width, height: height,lineHeight: height, fontSize: fontSize + 'px'}"><WWOpenData type="userName" :openid="user_name"></WWOpenData></div>
      <div class="user_img_bg" :style="{width: width, height: height}" ></div>
    </span>
  </div>
</template>
<script>
  export default {
    name: 'userImage',
    props: {
      width: {
        type: String,
        default: '0.8rem'
      },
      height: {
        type: String,
        default: '0.8rem'
      },
      id:{
        type: Number,
        default: 0
      },
      img_url: {
        type: String,
        default: ''
      },
      user_name: {
        type: String,
        default: ''
      },
      fontSize:{
        type: String,
        default: '14'
      }
    },
    watch:{
      id: function (val) {
        this.set_info()
        this.name_no()
      },
      img_url: function (val) {
        this.set_info()
        this.name_no()
      },
      user_name: function (val) {
        this.set_info()
        this.name_no()
      }
    },
    // 数据
    data(){
      let info = this.$store.getters.employee_map[this.id] || {name:'',img_url: '',id:0}
       console.log("q撒旦轻松的"+JSON.stringify(info))
      if(this.img_url != ''){
        info.img_url = this.img_url
      }
      if(this.user_name != ''){
        info.name = this.user_name
      }
      return {
        info: info,
        name: '',
      }
    },
    computed:{
    },
    // 方法
    methods:{
      set_info(){
        let info = this.$store.getters.employee_map[this.id] || {name:'',img_url: '',id:0}
        if(this.img_url != ''){
          info.img_url = this.img_url
        }
        if(this.user_name != ''){
          info.name = this.user_name
        }
        this.info = info
      },
      // 加载
      name_no(){
        if(!this.info.img_url){
          let pattern = new RegExp("^[\u4E00-\u9FA5]+");
          if(this.info.name.length > 2){
            if(pattern.test(this.info.name)){
              this.name = this.info.name.substring(this.info.name.length-2,this.info.name.length)
            }else{
              this.name = this.info.name.substring(0,2)
            }
          }else{
            this.name = this.info.name
          }
        }
      },
      defaultImg(){
        return "https://rescdn.qqmail.com/node/wwmng/wwmng/style/images/independent/DefaultAvatar$73ba92b5.png"
      },
      replaceImg(){
        // return 'static/images/gttx'+ Math.round(Math.random()*5) +'.jpg'
        return 'static/images/default5.png'
      },
    },
    // 组件挂载完成
    mounted() {
      this.name_no()
    },
  }
</script>
<style scoped>
  .img_round{
    position: relative;
    display: inline-block;
    vertical-align: top;
  }
  .img_round .user_img_bg{
    border-radius: 50%;
    background: #238dfa;
  }
  .user_name_div{
    position: absolute;
    z-index: 1;
    text-align: center;
    color: #fff;
    white-space:nowrap;
    overflow: hidden;
  }
  .logo_img{
    border-radius: 50%;
  }
  /deep/ .image-slot{
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    background: #f1f1f1;
  }
  /deep/ .van-image{vertical-align: top;}
</style>