2022-07-20 03:29:47 星期三

2022_07_19施工进度

点击 http://test.bandao.ltd 再点击歌单

网址是 http://test.bandao.ltd/itemMusic?id=5349291073 （好像直接点击进不去耶，显示404我也没搞懂）

今天做的事情：上面的歌单信息展示部分写了200多行，大部分都是样式，写得我自己都要看不懂了

已知bug ：

1. 直接点击链接或者再次刷新会404，但是本地运行没有这个情况
2. 歌单描述部分的箭头需要更改样式
3. pc端显示大概率异常

需要努力的地方：

1. 还需要了解一下flex布局
2. 加快学习的速度啊
3. （原神活动主要都肝完了要好好学习了）

下面是代码部分

<template>
    <img :src="playlist.coverImgUrl" alt="" class="bgImg">
    <van-row justify="space-between" align="center" class="itemMusicTop">
        <van-col span="8" class="itemLeft">
            <van-icon name="arrow-left" @click="$router.go(-1)" size="25" />
            <span>歌单</span>
        </van-col>
        <van-col span="8" class="itemRight">
            <van-icon name="search" class="search" size="25" />
            <van-icon name="wap-nav" class="wap-nav" size="25" />
        </van-col>
    </van-row>
    <van-row justify="space-between" align="center" class="itemMusicCenter">
        <van-col span="10" class="imgBox">
            <div class="imgBoxAndplayCount">
                <span class="playCount">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href='#icon-bofang1'></use>
                    </svg>
                    {{ changeCount(playlist.playCount) }}
                </span>
                <img :src="playlist.coverImgUrl" alt="" class="coverImg">
            </div>


        </van-col>
        <van-col span="14">
            <van-row justify="center" class="listInfo">
                <van-col span="30" class="title">{{ playlist.name }}</van-col>
                <van-col span="30" class="creator">
                    <img :src="playlist.creator.avatarUrl" alt="">
                    <span>
                        {{ playlist.creator.nickname }}
                        <van-icon name="arrow" size="15" />
                    </span>
                </van-col>
                <van-col span="30" class="description">
                    <div class="text">
                        {{ playlist.description }}
                    </div>
                    <van-icon name="arrow" size="15" />
                </van-col>
            </van-row>
        </van-col>
    </van-row>
    <van-row justify="space-between" align="center" class="functionButtons">
        <van-col span="6">
            <van-icon name="chat-o" size="30" />
            <span>{{ playlist.commentCount }}</span>
        </van-col>
        <van-col span="6">
            <van-icon name="share-o" size="30" />
            <span>{{ playlist.shareCount }}</span>
        </van-col>
        <van-col span="6">
            <van-icon name="down" size="30" />
            <span>下载</span>
        </van-col>
        <van-col span="6">
            <van-icon name="add-o" size="30" />
            <span>多选</span>
        </van-col>
    </van-row>
</template>

<script>
import { getMusicItemList } from '@/request/api/item'
export default {
    name: "itemMusicTop",
    props: ['playlist'],
    setup(props) {
        // console.log(props);
        // 通过props进行传值，判断如果没有，则从sessionStorage获取
        if ((props.playlist.creator = "")) {
            try {
                console.log("here");
                props.playlist.creator = JSON.parse(sessionStorage.getItem('itemDetail')).playlist.creator
            }
            catch {
                console.log("here");
                let response = getMusicItemList(playlistId)
                playlist = response.data.playlist
            }

        }
        function changeCount(num) {
            if (num >= 100000000) {
                // toFixed(1) 小数点后一位
                return (num / 100000000).toFixed(1) + "亿"
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + "万"
            }
        }
        return {
            changeCount
        }
    }

}
</script>

<style lang="less" scoped>
.itemMusicTop {
    height: 50px;
    padding: 10px;

    .itemLeft,
    .itemRight {

        .van-icon {
            color: #fff;
        }
    }

    .itemLeft {
        span {
            position: relative;
            font-size: 25px;
            margin-left: 30px;
            top: -2.5px;
            color: #fff;
            text-align: center;
        }
    }

    .itemRight {
        position: absolute;
        right: 10px;

        .search {
            margin-right: 40px;
        }
    }

}

.bgImg {
    position: fixed;
    width: 100%;
    height: 350px;
    z-index: -1;
    filter: blur(40px);
}

.itemMusicCenter {
    margin-top: -15px;
    padding: 10px;
    height: 180px;

    .imgBox {
        padding: 5px;
        width: 150px;
        text-align: center;

        .imgBoxAndplayCount {
            position: relative;
            height: 130px;
            width: 130px;

            .coverImg {
                border-radius: 0.4rem;
                height: 130px;
                width: 130px;
            }

            .playCount {
                position: absolute;
                right: 0.1rem;
                top: 0.1rem;
                font-size: 0.25rem;
                color: #ccc;
                display: flex;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.2);
                margin: 4px;
                padding: 3px;
                border-radius: 0.4rem;

                .icon {
                    width: 15px;
                    fill: #ccc;
                }
            }
        }

    }

    .listInfo {
        padding: 5px;
        flex-flow: column;
        width: 100%;
        height: 150px;

        .title {
            font-weight: 900;
            color: #fff;
            font-size: .39rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .creator {
            padding: 10px 5px;
            color: #ccc;

            img {
                position: relative;
                border-radius: 0.6rem;
                height: 30px;
            }

            span {
                position: absolute;
                padding-left: 10px;
                width: 160px;
                font-size: .32rem;
                line-height: 30px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

            }

            .van-icon {
                position: absolute;
                bottom: 7.5px;
                padding-left: 15px;
            }


        }

        .description {
            position: relative;
            color: #ccc;
            // width: 80%;
            height: 80px;

            .text {
                position: absolute;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
                width: 85%;
            }

            .van-icon {
                position: absolute;
                right: 13px;
                top: 27px;
            }
        }
    }
}

.functionButtons {
    color: #fff;
    height: 1.5rem;
    padding: 5px;
    margin-bottom: 10px;

    .van-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}
</style>