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

<template>
	<div class="item-author">
		<div  v-if="userName" @click="toHome()">
      <!-- <el-avatar shape="square" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar> -->
      <!-- <div v-else class="uavatar"><span class="uavatar-text">{{avatarText}}</span></div> -->
      <el-avatar shape="circle" size="small" :src="userAvatar" v-if="userAvatar"></el-avatar>
      <div v-else class="uavatar">
        <div v-if="sex == null" style="border-radius: 50%;width: 40px;height: 40px;"></div>
        <div v-else>
          <div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
           <div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
        </div>
        </div>
    </div>
		<div v-if="!onlyAvatar&&userName" style="padding-left: 14px;padding-top: 6px;font-size: 14px;">
      <span style="color: #333333;font-weight: 600;font-size: 16px;">{{userName}}</span>
      <span class="author-text" v-if="userInfo && userInfo!=''"> {{userInfo}} </span>
      <span style="margin-left: 15px;" class="comWords" v-if="authorTags.length != 0" v-for="tag in authorTags">{{tag}}</span>
    </div>
    <slot />
	</div>
</template>
<script>
  import {cutOrgNamePath} from "@/utils/tools.js";
	export default {
		props:{
			avatar:{
				type:String,
				default:''
			},
      width:{
        type:String,
				default:'200px'
      },
      sex:{
       	type:Number,
      },
			name:{
				type:String,
				default:''
			},
      aid:{
				type:String,
				default:''
			},
			info:{
				type:String,
				default:''
			},
      onlyAvatar:{
        type:Boolean,
        default:false
      },
      authorTags: {
        type:Array,
        default(){
          return []
        }
      }
		},
    data(){
    	return {
          baseUrl:process.env.VUE_APP_FILE_BASE_URL,
          userAvatar:'',
          userName:'',
          userInfo:'',
          usersex:null,
    	}
    },
    created() {
      // this.userAvatar=require("@/assets/images/user/default.png");
    },
    mounted() {
      this.userName=this.name;
      if(this.avatar && this.avatar!=''){
        this.userAvatar=this.avatar;
      }
      this.userInfo=cutOrgNamePath(this.info);
      this.usersex = this.sex;
    },
    methods:{
      toHome() {
        // ,query:{id:item.objId || item.id}
        if(this.aid){
          this.$router.push({path:this.$xpage.getHomePath(this.aid)})
        }else{
          this.$message.error("参数错误");
        }

      }
    },
    watch:{
      name(newVal,oldVal){
        this.userName=newVal;
      },
      avatar(newVal,oldVal){
        if(newVal){
          this.userAvatar=this.baseUrl+newVal;
        }
      },
      aid(newVal,oldVal){
        if(newVal){
          this.aid=newVal;
        }
      },
      sex(newVal,oldVal){
        this.usersex=newVal;
      },
      info(newVal,oldVal){
        if(newVal){
          this.userInfo=cutOrgNamePath(newVal);
        }
      }
    }
	}
</script>

<style scoped lang="scss">
	.item-author{
		// font-size: 0.9em;
    line-height: 18px;
		display: flex;
    .author-text{
      font-size: 12px;
      color: #999999;
      font-weight: 300;
      margin-left: 4px;
    }
    .comWords {
      background: #409EFF;
      border-radius: 2px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
      padding: 4px 10px;
    }
    .uavatar{
      // border: 1px solid #73adfe;
      width: 28px;
      height: 28px;
      // 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: 28px;
      height: 28px;
      }
    }
	}
</style>