留言

src/components/Portal/authorImg.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="item-author">
+		<div style="width:40px;height:40px;" @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%;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>
+</template>
+<script>
+	export default {
+		props:{
+			avatar:{
+				type:String,
+				default:''
+			},
+      width:{
+        type:String,
+				default:'200px'
+      },
+      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 && this.avatar!=''){
+        this.userAvatar=this.avatar;
+      }
+      this.usersex = this.sex;
+    },
+    methods:{
+      toHome() {
+        // ,query:{id:item.objId || item.id}
+        this.$router.push({path:'/homePage?id='+this.aid})
+      }
+    },
+    watch:{
+      name(newVal,oldVal){
+        this.userName=newVal;
+      },
+      avatar(newVal,oldVal){
+        if(newVal){
+          this.userAvatar=this.baseUrl+newVal;
+        }
+      },
+      sex(newVal,oldVal){
+        this.usersex=newVal;
+      },
+    },
+    computed:{
+		},
+
+	}
+</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: 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>