1、template

<template>
    <div class="find-home-page">
        <header :style="bgStyle">
            <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
            <i class="iconfont icon-common-more"></i>
        </header>
        <div class="top-box" id="topWrap">
            <div class="user-info">
                <img :src="userInfo.icon" :onerror="defaultAvatar">
                <div class="info-box">
                    <p class="name">
                        {{ userInfo.nickName }}
                        <i 
                            class="iconfont"
                            :class="{ 
                                'icon-woman': userInfo && userInfo.gender === 2, 
                                'icon-nan': userInfo && userInfo.gender === 1,
                                'icon-biangengxingbie': userInfo && userInfo.gender ===0
                            }">
                        </i>
                    </p>
                    <p class="account">买易买账号：{{ userInfo.id }}</p>
                    <span class="change-bg" v-if="isSelf">
                        <i class="iconfont icon-iconfontzhizuobiaozhun47"></i>
                        更换背景
                    </span>
                </div>
            </div>
            <div class="total-nums">
                <div class="item" @click="goFriendList(1)">
                    <p class="num">{{ userInfo.followNum }}</p>
                    <p class="label">关注</p>
                </div>
                <div class="item" @click="goFriendList(2)">
                    <p class="num">{{ userInfo.fansNum }}</p>
                    <p class="label">粉丝</p>
                </div>
                <div class="item" @click="goFriendList(3)">
                    <p class="num">{{ userInfo.likedNum }}</p>
                    <p class="label">被喜欢</p>
                </div>
                <div class="btn">
                    <span class="share" v-if="isSelf" @click="turnPage">发布分享</span>
                    <span 
                        v-else
                        :class="{ 'care': !userInfo.isFollow }" 
                        @click="clickCare">
                        {{ userInfo.isFollow ? "已关注" : "关注" }}
                    </span>
                    <i class="iconfont icon-chat"></i>
                </div>
            </div>
        </div>
        <ul class="tab-box" :class="{ 'fixed-top': tabFixed }">
            <li
                v-for="(item, index) of tabList"
                :key="index"
                @click="changeTab(index)"
                :class="{ 'active': activetab == index }">
                {{ item.label + "(" + item.num + ")" }}
            </li>
        </ul>
        <div class="tab-container">
            <Empty v-if="!list.length" :empty_type="{name: '快来发布你的第一篇笔记吧'}"></Empty>
            <List
        ref="list"
        :url="url"
                :params="params"
        method="get"
        :on-getdata="onGetdata"
        :showText="list && list.length > 0"
      >
        <div
          slot="item"
          class="item"
          v-for="(item, index) in list"
          :key="index"
            >
                    <CareCell :showUserInfo="false" :data="item">
                        <template #bt-operate>
                            <p class="bt-userinfo">
                                <span>
                                    <img :src="userInfo.icon" :onerror="defaultAvatar">
                                    {{ userInfo.nickName }}
                                </span>
                                <span>
                                    <i class="iconfont icon-aixin"></i>
                                    {{ item.likeNum }}
                                </span>
                                <i @click.stop="delArticle(item)" v-if="isSelf" class="iconfont icon-shanchu1"></i>
                                <i @click.stop="editArticle(item)" v-if="isSelf && activetab == 1" class="iconfont icon-bianji"></i>
                            </p>
                        </template>
                    </CareCell>
                </div>
            </List>
        </div>
    </div>
</template>

2、style

<style lang="scss" scoped>
    .find-home-page {
        background: #f4f4f4;
        height: 100vh;
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0);
            color: #fff;
            @extend %flex-space-between;
            padding: 0 32px;
            height: 98px;
            line-height: 98px;
            z-index: 9999;
            i {
                font-size: 40px;
                opacity: 1;
            }
        }
        .top-box {
            background: #3A5577;
            padding: 150px 32px 180px;
            color: #fff;
            .user-info {
                margin-bottom: 80px;
                img {
                    width: 166px;
                    height: 166px;
                    border-radius: 50%;
                    vertical-align: bottom;
                    margin-right: 32px;
                }
                .info-box {
                    height: 166px;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    .name {
                        font-size: 30px;
                        font-weight: 800;
                        i {
                            font-size: 32px;
                            &.icon-biangengxingbie {
                                color: #10B182;
                            }
                            &.icon-nan {
                                color: #4EA1FD;
                            }
                            &.icon-woman {
                                color: #FF6BD5;
                            }
                        }
                    }
                    .account {
                        font-size: 20px;
                    }
                    .change-bg {
                        font-size: 20px;
                        background: rgba(255, 255, 255, .17);
                        width: 138px;
                        height: 36px;
                        line-height: 36px;
                        border-radius: 18px;
                        text-align: center;
                        i {
                            color: #FFCB21;
                            vertical-align: middle;
                            font-size: 28px;
                        }
                    }
                }
            }
            .total-nums {
                display: flex;
                align-items: center;
                .item {
                    margin-right: 80px;
                    text-align: center;
                    .num {
                        font-size: 30px;
                        margin-bottom: 20px;
                    }
                    .label {
                        font-size: 22px;
                    }
                }
                .btn {
                    flex: 1;
                    text-align: center;
                    span {
                        display: inline-block;
                        width: 160px;
                        height: 60px;
                        line-height: 60px;
                        border-radius: 30px;
                        text-align: center;
                        font-size: 26px;
                        border: 1px solid #fff;
                        &.share {
                            border: 1px solid #fff;
                        }
                        &.care {
                            background: #DE0F0F;
                            border: 1px solid #DE0F0F;
                        }
                    }
                    i {
                        font-size: 40px;
                        margin-left: 40px;
                    }
                }
            }
        }
        .tab-box {
            position: relative;
            @extend %flex-center;
            background: #fff;
            border-radius: 50px 50px 0px 0px;
            height: 90px;
            line-height: 90px;
            margin-top: -90px;
            background: #fff;
            padding-bottom: 20px;
            li {
                flex: 1;
                text-align: center;
                color: #666;
                font-size: 26px;
                font-weight: bold;
                &.active {
                    color: #333;
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        width: 78px;
                        height: 6px;
                        background: #FC2621;
                        border-radius: 3px;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 10px;
                    }
                }
            }
            &.fixed-top {
                position: fixed;
                top: 188px;
                left: 0;
                right: 0;
                z-index: 9999;
            }
            &::after {
            width: 100vw;
            height: 20px;
            background: #F4F4F4;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        }
        .tab-container {
            .cell-wrap {
                .bt-userinfo {
                    padding: 20px 0;
                    span {
                        font-size: 24px;
                        &:first-child {
                            color: #333;
                            margin-right: 100px;
                            img {
                                width: 44px;
                                height: 44px;
                                border-radius: 50%;
                                margin-right: 10px;
                                vertical-align: middle;
                                overflow: hidden;
                            }
                        }
                        &:last-child {
                            color: #666;
                            i {
                                color: #666;
                                font-size: 40px;
                                vertical-align: middle;
                            }
                        }
                    }
                    >i {
                        float: right;
                        margin: 20px 0;
                        color: #999;
                        font-size: 36px;
                        margin-left: 32px;
                    }
                }
            }
            .empty {
                margin-top: 100px;
            }
        }
    }
</style>

3、js

<script>
import defaultAvatar from "@/assets/images/avatar.png";
import CareCell from '@/components/find/CareCell';

export default {
    name: "FindHomePage",
    components: {
        CareCell
    },
    data() {
        return {
      defaultAvatar: `onerror=null;src='${defaultAvatar}'`,
            tabList: [],
            activetab: 0,
            bgStyle: {
        // 设置初始状态是透明的
        background: "rgba(55, 69, 110, 0)"
            },
            tabFixed: false,
            isSelf: true,
            url: "/article/getUserArticleList",
            list: [],
            username: "",
            params: {},
            userInfo: {}
        }
    },
    created() {
        // 判断是否是用户本人主页
        if (this.$store.getters.getUserInfo.username == this.$route.query.username) {
            this.username = this.$store.getters.getUserInfo.username
            this.isSelf = true;
            this.tabList = [ 
                {
                    label: '我发布的',
                    num: 0
                },
                {
                    label: '我的草稿',
                    num: 0
                },
                {
                    label: '我喜欢的',
                    num: 0
                }
            ];
        } else {
            this.username = this.$route.query.username;
            this.isSelf = false;
            this.tabList = [ 
                {
                    label: 'TA的发布',
                    num: 0
                },
                {
                    label: 'TA的喜欢',
                    num: 0
                }
            ];
        }

        this.params = {
            viewUsername: this.username,
            status: this.isSelf ? 1 : 2
        }
    },
    mounted() {
        this.getUserInfo();
        window.addEventListener("scroll", this.handleScroll);
    },
    methods: {
        getUserInfo() {
            this.$_api.find.userInfo(this.username).then(res => {
                const result = this.$_api.result(res);
                if (this.$_api.successful(result)) {
                    this.userInfo = result.data;
                } else {
                    this.$toast(this.$_api.msg(result));
                }
            })
        },
        changeTab(index) {
            if (this.activetab == index) return;
            this.activetab = index;
            if (index === 0) {
                this.params = {
                    viewUsername: this.username,
                    status: this.isSelf ? 1 : 2
                }
                this.url = "/article/getUserArticleList";
            } else if (index == 2) {
                this.params = {
                    viewUsername: this.username
                }
                this.url = "/article/getUserLikeArticleList";
            } else {
                this.params = {
                    viewUsername: this.username
                }
                if (this.isSelf) {
                    this.params.status = 0
                }
                this.url = this.isSelf ? "/article/getUserArticleList" : "/article/getUserLikeArticleList"
            }
            this.$refs.list.reset();
        },

        goFriendList(type) {
            if (!this.isSelf) return;
            this.$router.push({ name: 'FindFriendList', query: { type: type }})
        },

        delArticle(row) {
            this.$dialog.confirm({
                title: '提示',
                message: '确认删除该草稿吗？'
            }).then(() => {
                // on confirm
            })
        },
        editArticle(row) {
            this.$store.commit("IS_RESET_STATE", 1);
            this.$router.push({ 
                name: 'PublishShare',
                query: {
                    articleId: row.id
                }
            });
        },  

    onGetdata(data) {
      this.list = data.map(item => {
                item.picArr = item.pics.split(",");
                return item;
            })
    },

        // 关注-取消关注
        clickCare() {
            if (this.userInfo.isFollow) { // 删除关注
                this.$_api.find.deleteUserFollow(this.username).then(res => {
                    const result = this.$_api.result(res);
                    if (this.$_api.successful(result)) {
                        this.getUserInfo();
                    } else {
                        this.$toast(this.$_api.msg(result));
                    }
                })
            } else { // 添加关注
                this.$_api.find.addUserFollow(this.username).then(res => {
                    const result = this.$_api.result(res);
                    if (this.$_api.successful(result)) {
                        this.getUserInfo();
                    } else {
                        this.$toast(this.$_api.msg(result));
                    }
                })
            }
        },

        handleScroll () {
        //获取当前页面的滚动条纵坐标位置 网页被卷去的高
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
            let opacity = scrollTop / 140;
            opacity = opacity > 1 ? 1 : opacity;
            this.bgStyle = { background: `rgba(55, 69, 110, ${ opacity })`};
            
            // tab滚动到页面顶部时固定在顶部(header下面)
            let offsetHeight = document.querySelector('#topWrap').offsetHeight;
            let fz = document.documentElement.style.fontSize; // 获取根元素的字体大小
            let scaleNum = 75 / parseFloat(fz); // 计算px转成rem的基数
            // 判断 滚动的高度 >= top盒子的高度 - (header的高度 + tab栏的高度)
            this.tabFixed = scrollTop * scaleNum >= offsetHeight * scaleNum - 188 ? true : false;
    },

        turnPage() {
            this.$store.commit("IS_RESET_STATE", 1);
            this.$router.push({ name: 'PublishShare' });
        }
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    }
}
</script>