vue3我的页面抖音

<template>
    <div class="diee">
        <div class="profile">
            <div class="right" @click="dak">...</div>
            <div class="xiugai" ref="ruguo">
                <div class="s1" @click="green">修改个人信息</div>
                <div class="s2" @click="zhuxiao">注销账户</div>
            </div>
            <div class="background" ref="imgbox">
                <img src="http://43.138.15.137/assets/img/281578538336_.pic_hd.e816ad71.jpg" alt="" class="bg">
            </div>
            <div class="bottom" @touchstart="onTouchStart" @touchmove.prevent="onTouchMove" @touchend="onTouchEnd">
                <div class="profile" ref="userbox">

                    <div class="avatar-wrap"><img :src="'http://43.138.15.137:3000' + geren.userAvatar" alt=""
                            class="avatar"></div>
                    <div class="name-wrap">
                        <p class="name">{{ geren.userNickname }}</p>
                        <p class="subname">
                            抖音号：{{ geren.userId }}
                        </p>
                        <div class="btn" style="display: none;">关注</div>
                    </div>
                    <div class="desc-wrap">
                        <p class="desc">{{ geren.userDesc }}</p>
                        <div class="gender">
                            <div class="icon iconfont icon-man"></div>
                            999岁
                        </div>
                        <div class="num-wrap">
                            <p>{{ byLikesNuml }}获赞</p>
                            <p>{{ guanzhu }}关注</p>
                            <p>{{ fennum }}粉丝</p>
                        </div>
                    </div>
                    <div class="tab" ref="xiahua">

                        <div @click="cur(0)" :class="{ active: indx == 0 }" class="huan"><span>作品{{ userVideoNum
                                }}</span>
                        </div>
                        <div @click="cur(1)" :class="{ active: indx == 1 }" class="huan"><span>私密{{ userVideoNum
                                }}</span></div>
                        <div @click="cur(2)" :class="{ active: indx == 2 }" class="huan"><span>喜欢{{ userLikes }}</span>
                        </div>

                    </div>
                    <div class="show">
                        <RouterView v-slot="{ Component }">
                            <keep-alive>
                                <component :is="Component" />
                            </keep-alive>
                        </RouterView>
                    </div>
                </div>
            </div>
        </div>
        <div class="xiatou" ref="chulai">
            <p>防</p>
            <div class="tab">
                <div @click="cur(0)" :class="{ active: indx == 0 }" class="huan"><span>作品{{ userVideoNum
                        }}</span>
                </div>
                <div @click="cur(1)" :class="{ active: indx == 1 }" class="huan"><span>私密{{ userVideoNum
                        }}</span></div>
                <div @click="cur(2)" :class="{ active: indx == 2 }" class="huan"><span>喜欢{{ userLikes }}</span>
                </div>

            </div>
        </div>
        <dibu></dibu>
        <Transition name="router">
            <Asyncxinxi v-if="ishow" :ishow=ishow @shijian="ishow = false"></Asyncxinxi>
        </Transition>

    </div>

</template>
<script setup>
import dibu from '../components/dibu.vue'
import { ref, defineAsyncComponent, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { getuserfolloverlAPI, } from '../api/userfaoolw'
import { getuserFansNumlAPI, } from '../api/fansnum'
import { userbyLikesNumlAPI, } from '../api/byLikesNum'
import { userVideosNumlAPI, } from '../api/VideosNum'
import { userLikesNumlAPI, } from '../api/userLikesNum'
import loding from '../components/lodingdonghua.vue'
import { uservideopageAPI, } from '../api/usershipin'
import { userbgerenxixiAPI, } from '../api/userzhuye'
import { gethlogotAPI } from '../api/zhuxiao.js'

const Asyncvideo = defineAsyncComponent({
    loader: () => (new Promise((resolve, reject) => setTimeout(() => {
        resolve(import('../components/video.vue'))

    }, 2000))),
    loadingComponent: loding,
    delay: 5000,
})
const Asyncxinxi = defineAsyncComponent({
    loader: () => (new Promise((resolve, reject) =>
        resolve(import('../components/gerenxinxi.vue'))

    ))
})
let pathlist = ref(['/user/video', '/user/userdongtai', '/user/userlike'])
let indx = ref(0)
let guanzhu = ref(0)
let fennum = ref(0)
let byLikesNuml = ref(0)
let userVideoNum = ref(0)
let userLikes = ref(0)
let router = useRouter()
let startY = ref(0)
let moveY = ref(0)
let userbox = ref(null)
let imgbox = ref(null)
let ruguo = ref(null)
let yuan = ref(150)
let zhi = ref(1)
let aa = ref(null)
let ishow = ref(false)
let lishi = ref(0)
let deom = ref(0)
let geren = ref([])
let chulai = ref(null)
function cur(index) {
    indx.value = index
    router.push(pathlist.value[index])
    userbox.value.style = `transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);`
    chulai.value.style.top = '-91px';
    chulai.value.style.transition = 'all 0s'
}
let route = useRoute()
if (route.path == '/user/userdongtai') {
    indx.value = 1
} else if (route.path == '/user/userlike') {
    indx.value = 2
}
async function follovers(params) {
    let resolved = await getuserfolloverlAPI(localStorage.getItem('userId'))

    guanzhu.value = resolved.data.data
}
follovers()
async function FansNums(params) {
    let resde = await getuserFansNumlAPI(localStorage.getItem('userId'))

    fennum.value = resde.data.data
}
FansNums()
async function userbyLike() {
    let byLike = await userbyLikesNumlAPI(localStorage.getItem('userId'))
    byLikesNuml.value = byLike.data.data
}
userbyLike()
async function userVideosNum(params) {
    let VideoNum = await userVideosNumlAPI(localStorage.getItem('userId'))

    userVideoNum.value = VideoNum.data.data
}
userVideosNum()
async function userLikesNum(params) {
    let LikesNumDE = await userLikesNumlAPI(localStorage.getItem('userId'))

    userLikes.value = LikesNumDE.data.data
}
userLikesNum()


async function gerenxinxi() {
    let usergeren = await userbgerenxixiAPI()
    console.log(usergeren);
    geren.value = usergeren.data.data
    console.log(geren.value);
    localStorage.setItem('userAvatar', usergeren.data.data.userAvatar)
    localStorage.setItem('userNickname', usergeren.data.data.userNickname)
    if (usergeren.data.status !== 200) {
        localStorage.removeItem('userNickname', 'userAvatar')
    }

}
gerenxinxi()
function onTouchStart(e) {
    moveY.value = 0
    startY.value = e.changedTouches[0].pageY

    deom.value = userbox.value.offsetHeight - userbox.value.parentNode.offsetHeight
}
function onTouchMove(e) {
    moveY.value = e.changedTouches[0].pageY - startY.value
    if (moveY.value == 0) return
    if ((moveY.value < 0 && lishi.value + moveY.value >= -deom.value - 140) || (moveY.value > 0 && lishi.value + moveY.value <= 140)) {
        userbox.value.style = `transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, ${lishi.value + moveY.value}px) scale(1) translateZ(0px);`
    }
    if (lishi.value + moveY.value >= 0 && lishi.value + moveY.value <= 140) {
        imgbox.value.style = `height: ${150 + moveY.value}px; transform: scaleX( ${(150 + moveY.value) / 150})`
    }
    if (lishi.value + moveY.value <= -330) {
        chulai.value.style.top = 0;
        chulai.value.style.transition = 'all .5s'
    } else {
        chulai.value.style.top = '-91px';
        chulai.value.style.transition = 'all 0s'

    }
}

function onTouchEnd() {
    lishi.value += moveY.value
    if ((moveY.value < 0 && lishi.value > -deom.value) || (moveY.value > 0 && lishi.value <= 0)) return lishi.value
    if (lishi.value <= -deom.value) lishi.value = -deom.value
    if (lishi.value >= 0) lishi.value = 0
    userbox.value.style = `transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, ${lishi.value}px) scale(1) translateZ(0px);`
    imgbox.value.style = `height: ${yuan}px; transform: scaleX(${zhi})`
}
function dak() {

    if (aa.value == null) {

        ruguo.value.style = 'opacity:1;'
        aa.value = 'aa'
    } else if (aa.value = 'aa') {

        ruguo.value.style = 'opacity:0;'
        aa.value = null
    }
}
function green() {
    ishow.value = true
}
async function zhuxiao() {
    let reszzx = await gethlogotAPI(localStorage.getItem('userId'))
    console.log(reszzx);
    localStorage.removeItem('userId')
    router.push('/')
}



</script>
<style scoped>
.xiatou {
    position: fixed;
    top: -91px;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    background-color: #161622;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    opacity: 1;
    transition: all .5s;
}

.diee {
    width: 100vw;
    height: 100vh;
    background-color: #161622;
    z-index: 1000;
}

.router-enter-active {
    animation: jin .5s;
}

.router-leave-active {
    animation: chu .5s;
}

@keyframes jin {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }

}

@keyframes chu {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }

}

.backbtn-wrap {
    position: fixed;
    top: 0;
    height: 42px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 255;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.backbtn-wrap .backbtn {
    margin-left: 10px;
    padding: 8px;
    background: rgba(22, 24, 35, 0.6);
    border-radius: 50%;
    font-size: 12px;
}

.backbtn-wrap .name {
    visibility: hidden;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.backbtn-wrap .dotbtn {
    position: relative;
    margin-right: 10px;
    padding: 8px;
    background: rgba(22, 24, 35, 0.6);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

.backbtn-wrap .dotbtn .more-menu {
    position: absolute;
    top: 40px;
    right: -2px;
    width: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: rgba(22, 24, 35, 0.6);
}

.backbtn-wrap .dotbtn .more-menu .menu-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 44px;
    height: 44px;
    width: 100%;
    text-align: center;
}

.backbtn-wrap .dotbtn .more-menu .menu-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 44px;
    height: 44px;
    width: 100%;
    text-align: center;
}

.profile .background {
    width: 100%;
    height: 150px;
}

.profile .bottom {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 150px 0 44px 0;
}

.profile .background .bg {
    width: 100%;
    height: 100%;
}

.profile .bottom .profile {
    position: relative;
    width: 100%;
    background: #161622;
}

.profile .bottom .profile .avatar-wrap {
    position: absolute;
    left: 10px;
    top: -15px;
    border-radius: 50%;
    padding: 5px;
    width: 80px;
    height: 80px;
    background: #161622;
}

.profile .bottom .profile .avatar-wrap .avatar {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.profile .bottom .profile .name-wrap {
    position: relative;
    margin: 0 10px;
    padding: 80px 10px 10px;
    border-bottom: 1px solid rgba(41, 40, 37, 0.8);
}

.profile .bottom .profile .name-wrap .name {
    color: #fff;
    font-size: 22px;
}

.profile .bottom .profile .name-wrap .subname {
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
}

.profile .bottom .profile .name-wrap .btn {
    position: absolute;
    right: 5px;
    top: 20px;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    margin-right: 5px;
    width: 70px;
    height: 25px;
    background: #f8355f;
}

.profile .bottom .profile .desc-wrap {
    margin: 10px;
}

.profile .bottom .profile .desc-wrap .desc {
    color: #8b8c96;
    font-size: 12px;
}

.profile .bottom .profile .desc-wrap .gender {
    margin-top: 10px;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(67, 51, 63, 0.7);
    font-size: 10px;
    max-width: 50px;
    color: #8b8c96;
}

.profile .bottom .profile .desc-wrap .gender .icon-man {
    color: #14bae2;
}

.profile .bottom .profile .desc-wrap .gender .icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    font-size: 10px;
}

.profile .bottom .profile .desc-wrap .num-wrap {
    margin-top: 10px;
    width: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: white;
}

.profile .bottom .profile .desc-wrap .num-wrap>p {
    font-size: 14px;
}

.tab {

    display: flex;
    width: 100%;
    height: 30px;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;

    background-color: #161622;
}

.active {
    border-bottom: 1px solid yellow;
    /* padding-bottom: 0.2rem; */

}

.huan {
    width: 200px;
    margin-left: 4px;
    text-align: center;
    color: white;
    height: 30px;
    line-height: 30px;

}

.profile .background .bg {
    width: 100%;
    height: 100%;
}

.right {
    position: fixed;
    top: 2px;
    right: 3px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: rgba(22, 24, 35, 0.6);
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    color: white;
}

.xiugai {
    position: fixed;
    top: 40px;
    right: 10px;
    width: 100px;
    height: 100px;
    background-color: #161622;
    opacity: 0;
    transition: all 1s;
}

.s1 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    color: white;
}

.s2 {
    width: 100%;
    height: 50px;

    line-height: 50px;
    font-size: 14px;
    text-align: center;
    color: white;
}
</style>