个人空间头部组件开发

<template>
	<view class="user-space-head u-f-ajc">
		<image :src="getBgImg" mode="widthFix" lazy-load @tap.stop="changeBgImg"></image>
		<view class="user-space-head-info u-f-ajc u-f-column">
			<image :src="userinfo.userpic" mode="widthFix" lazy-load></image>
			<view class="user-space-margin u-f-ac"><text>{{userinfo.username}}</text> <tagSexAge :sex="userinfo.sex" :age="userinfo.age"></tagSexAge></view>
			<view class="icon iconfont  user-space-head-btn user-space-margin" :class="[isguanzhu?'active': 'icon-zengjia']" @tap.stop="guanzhu">{{isguanzhu?'已关注':'关注'}}</view>
		</view>
	</view>
</template>

<script>
		import tagSexAge from '../common/tag-sex-age.vue'
	export default {
		components: {
			tagSexAge 
		},
		props: {
			userinfo: Object
		},
		data() {
			return {
				isguanzhu: false
			}
		},
		computed: {
			getBgImg() {
				return "../../static/bgimg/"+ this.userinfo.bgimg+".jpg"
			}
		},
		methods: {
			// 切换背景
			changeBgImg() {
				let num = parseInt(this.userinfo.bgimg)
				this.userinfo.bgimg = num < 4 ? ++num : 1
			},
			// 关注
			guanzhu() {
				this.isguanzhu = !this.isguanzhu
			}
		}
	}
</script>

<style lang="less" scoped>
.user-space-margin {
	margin: 15rpx 0;
}
.user-space-head {
	position: relative;
	height: 500rpx;
	overflow: hidden;
	image {
		width: 100%;
	}
	.user-space-head-info {
		position: absolute;
		top: 150rpx;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		view {
			&:first-of-type {
				text {
					color: #fff;
					font-size: 35rpx;
					font-weight: bold;
					text-shadow: 2rpx 2rpx 10rpx #333;
				}
			}
		}
		.user-space-head-btn {
			background-color: #ffe933;
			color: #333;
			border: 1rpx solid #ffe933;
			padding:0 15rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
		.active {
			background: none;
			color: #fff;
			border: 1rpx solid #fff;
		}
	}
}

</style>