learning-system-portal/src/components/Portal/authorImg.vue

<template>
	<div class="item-author">
		<div :style="`width:${width};height:${height};`" @click="toHome()">
            <el-avatar shape="circle" :src="userAvatar" v-if="userAvatar"></el-avatar>
            <div v-else class="uavatar">
                <div v-if="sex == null" style="border-radius: 50%;" :style="`width:${width};height:${height};`"></div>
                <div v-else>
                    <div v-if="sex === 1 "><img :src="`${webBaseUrl}/images/Avatarman.png`" alt=""></div>
                    <div v-else><img :src="`${webBaseUrl}/images/Avatarwoman.png`" alt=""></div>
                </div>
            </div>
        </div>
	</div>
</template>
<script>
	export default {
		props:{
			avatar:{
				type:String,
				default:''
			},
      width:{
        type:String,
				default:'40px'
      },
      height:{
        type:String,
				default:'40px'
      },
      sex:{
       	type:Number,
      },
      aid:{
	  	type:String,
	  	default:''
	  },
		},
    data(){
    	return {
          baseUrl:process.env.VUE_APP_FILE_BASE_URL,
          userAvatar:'',
          userName:'',
          usersex:null,
    	}
    },
    created() {
      // this.userAvatar=require("@/assets/images/user/default.png");
    },
    mounted() {
      this.userName=this.name;
      if(this.avatar){
        if(this.avatar.startsWith('http')){
          this.userAvatar=this.avatar;
        }else{
          this.userAvatar=this.baseUrl+this.avatar;
        }
      }
      this.usersex = this.sex;
    },
    methods:{
      toHome() {
        // ,query:{id:item.objId || item.id}
        this.$router.push({path:this.$xpage.getHomePath(this.aid)})
      }
    },
    watch:{
      name(newVal,oldVal){
        this.userName=newVal;
      },
      avatar(newVal,oldVal){
        if(newVal){
          if(newVal.startsWith('http')){
            this.userAvatar=newVal;
          }else{
            this.userAvatar=this.baseUrl+newVal;
          }
        }
      },
      aid(newVal,oldVal){
        this.aid=newVal
      },
      sex(newVal,oldVal){
        this.usersex=newVal;
      },
    }
	}
</script>

<style scoped lang="scss">
	.item-author{
		// font-size: 0.9em;
    line-height: 18px;
		display: flex;
    .author-text{
      font-size: 12px;
      color: #666666;
      margin-left: 4px;
    }
    .uavatar{
      // border: 1px solid #73adfe;
      width: 100%;
      height: 100%;
      // background: #d9e9ff;
      display: flex;
      justify-content: center;
      align-items: center;
      .uavatar-text{
        transform: scale(0.8);
        font-size: 12px;
        color: #73adfe;
      }
      img{
        border-radius: 50%;
         width: 100%;
         height: 100%;
      }
    }
	}
</style>