Files
learning-system-mobile/components/author-info/author-info.vue
2022-11-09 14:06:13 +08:00

133 lines
2.6 KiB
Vue

<template>
<view class="item-author" style="display: flex;line-height: 25px;">
<view>
<u-avatar v-if="avatar && avatar!=''" shape="circle" :size="width" :src="fileUrl+avatar" ></u-avatar>
<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
<view v-else>
<view v-if="sex == null" class="peo"></view>
<view v-else :style="{width:width,height:height}">
<view class="peo" v-if="sex === 1 "><image src="../../static/images/man.png" alt=""></view>
<view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
</view>
</view>
</view>
<view class="author-name">{{name}}</view>
<!-- <view v-if="showInfo && info!=''" style="padding-left: 10upx;padding-top: 10upx;">({{info}})</view> -->
<!-- ({{info}}) -->
</view>
</template>
<script>
export default {
props:{
avatar:{
type:String,
default:''
},
name:{
type:String,
default:''
},
showInfo:{
type:Boolean,
default:false
},
showCode:{
type:Boolean,
default:false
},
info:{
type:String,
default:''
},
sex:{
type:Number,
default:null
},
width:{
type:String,
default:'20px'
},
height:{
type:String,
default:'20px'
},
},
data(){
return {
fileUrl:this.$config.fileUrl,
userAvatar:'',
// sex:null,
}
},
computed:{
avatarText(){
let text=this.name;
if(text){
let len=text.length;
if(text.length>2){
text=text.substring(len-2);
}
}
return text;
}
},
mounted() {
this.userAvatar=this.avatar;
// this.sex = this.sex;
//console.log(this.userAvatar,'this.userAvatar');
},
watch:{
// avatar(newVal){
// //console.log(newVal,'newVal');
// if(newVal && newVal!=''){
// this.userAvatar=newVal;
// }else{
// this.userAvatar=this.$config.context+'/static/temp/hPhoto.png';
// }
// //console.log(this.userAvatar,'this.userAvatar');
// }
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.peo{
width: 100%;
height: 100%;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.uavatar{
border:1px solid #73adfe;
background-color: #d9e9ff;
color:#73adfe;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
.uavatar-scale{
transform:scale(0.8);
}
}
.item-author{
font-size: 14upx;
display: flex;
align-items: center;
.author-name{
padding-left:16upx;
padding-top: 4upx;
font-size: 28upx;
color: #666666;
}
}
</style>