GterForumWeB/src/views/detail/detailIndex.vue

<template>
    <div class="container">
        <div class="detail-head flexacenter">
            <div class="detail-section">版块：<span class="section-name">香港澳门台湾留学申请</span></div>
            <div class="detail-data flexacenter">
                <div class="detail-data-item flexacenter">
                    <img class="detail-data-eye" src="@/assets/img/detail/eye.png">10378
                </div>
                <div class="detail-data-item flexacenter">
                    <img class="detail-data-comment" src="@/assets/img/detail/comment.png">16
                </div>
            </div>
        </div>

        <div class="detail-title-box">
            <div class="detail-title-item detail-title-jinghua flexcenter">精华</div>
            <div class="detail-title-item detail-title-label flexcenter">生活贴士</div>
            香港永久居民的申请步骤和过程
        </div>

        <!--  -->
        <div class="card flexcenter">
            <div class="card-item shadow" v-for="(item, index) in 7" :key="index">
                <div class="card-head flexacenter">
                    <img class="card-head-icon"
                        src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
                    <div class="card-head-content flex1 flexflex">
                        <div class="card-head-name flexflex">闫旭Mike <div class="landlord flexcenter" v-if="index == 0">楼主
                            </div>
                        </div>
                        <div class="card-head-time">2022-7-6 14:56</div>
                    </div>
                    <div class="card-head-fool">{{ index == 0 ? '楼主' : `${index}楼` }}</div>
                </div>

                <div class="card-content flex1">
                    <!-- 回复引用 -->
                    <div class="quotation flexflex" v-if="index == 1">
                        <svg-icon icon-class="quotation-left" class-name="quotation-icon"></svg-icon>
                        <div class="quotation-right flex1 flexflex">
                            <div class="quotation-wenzi flex1 three-lines">
                                这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…
                            </div>

                            <div class="quotation-bottom flexacenter">zhangsd 发表于 2022-7-6 14:56
                                <svg-icon icon-class="quotation-right" class-name="quotation-icon"></svg-icon>
                            </div>
                        </div>
                    </div>
                    之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                    <!-- 未解锁区域 -->
                    <div class="flexcenter content-unlock" v-if="index == 3 || index == 4">
                        <img class="unlock-icom" src="@/assets/img/detail/unlock.png">
                        {{ index == 3 ? '作者设置了回复可见' : '' }}
                        {{ index == 4 ? '作者设置了投币可见' : '' }}
                    </div>
                    <!-- 已经解锁区域 -->
                    <div class="content-unlock" v-if="index == 5 || index == 6">
                        <div class="content-already-header flexflex">
                            - 本内容投币可见 -
                        </div>
                    </div>

                    之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                    之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                </div>
            </div>


        </div>

        <!-- 分页 -->
        <div class="paging flexcenter">
            <el-pagination small background layout="prev, pager, next" :total="1000">
            </el-pagination>
        </div>

        <!-- 底部 -->
        <div class="discuss-bottom flexflex flexacenter">
            <!-- 底部的轮播 -->
            <div class="swiper">
                <div class="bottom-item flexacenter">
                    <div class="bottom-comment flexacenter" @click="setValue('popState', 'discussionSingle')">
                        <svg-icon icon-class="pen" class-name="bottom-comment-icom"></svg-icon>
                        想问啥，大胆问
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom-item flex1 flexacenter">
                <div class="bottom-operation-box flex1 flexacenter">
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapLike">
                        <div class="praise_bubble" id="praise_bubble" @click.stop=""
                            :style="{ height: prepareLiskeState ? '' : '.5333rem' }">
                            <div class="bubble" v-for="(item, index) in listlist" :key="index"></div>
                        </div>

                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
                        </div>
                        <img class="bottom-operation-icom" :class="{ 'prepareLiskeAnimateState': prepareLiskeAnimateState }"
                            src="@/assets/img/detail/like.png" />
                        <div class="bottom-operation-text">{{ stat.like == 0 ? '' : stat.like }}赞</div>
                    </div>
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="postcollect()">
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
                        </div>
                        <img v-if="iscollect == 0" class="bottom-operation-icom" src="@/assets/img/detail/collect.png">
                        <img v-else class="bottom-operation-icom" src="@/assets/img/detail/collect-c.png">
                        <div class="bottom-operation-text">收藏</div>
                    </div>
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="transmit()">
                        <img class="bottom-operation-icom bottom-transmit-icom" src="@/assets/img/detail/share.png" />
                        <div class="bottom-operation-text">转发</div>
                        <button class="bottom-operation-button flexcolumn flexcenter" open-type="share"></button>
                    </div>
                </div>
            </div>
        </div>


        <detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
        <coins :coin-config="coinConfig" :pop-state="popState"></coins>
    </div>
</template>

<script>
import DetailReply from '@/components/DetailReply'
import Coins from '@/components/unlock/Coins'
export default {
    name: 'detailIndex',
    data() {
        return {
            twoCommentData: {
                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
                content: "评论回复",
            },
            popState: "",
            coinConfig: {
                strategy: {
                    button: "攒币指南",
                    tips: "你的寄托币不够，快去发帖挣币吧",
                    url: "https://bbs.gter.net/thread-2543548-1-1.html",
                }
            },

            info: {
                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
                likenum: 1
            },

            islogin: true,
            prepareLiskeState: false,
            prepareLiskeAnimateState: false,
            stat: {
                like: 0
            },
            iscollect: 0,

            ispostOfferLike: null, // 点击点赞提交状态
            offerLikesumTimer: 0, // offer点赞累加定时器
            offerLikesumAnimateTimer: 0, // offer点赞动画定时器
            listlist: []
        };
    },

    mounted() {
    },

    methods: {
        // 点击点赞

        // 点击点赞
        tapLike() {
            this.isState = true
            this.prepareLiskeState = true
            this.prepareLiskeAnimateState = true

            clearTimeout(this.offerLikesumTimer)
            clearTimeout(this.offerLikesumAnimateTimer)

            let praiseBubble = document.getElementById("praise_bubble");
            console.log("praiseBubble", praiseBubble);
            let last = 0;
            let b = Math.floor(Math.random() * 8) + 1; // 1 到 7的 图片
            // b = 1; // 测试写固定的
            const bl = Math.floor(Math.random() * 11) + 1; // bl1~bl11
            let d = document.createElement("div");
            d.style.backgroundImage = `url('./img/bg${b}.png')`
            d.style.backgroundSize = 'contain'
            d.className = `bubble`;
            // d.style.animation = `bubble_${bl} 1.5s linear 1 forwards, bubble_big_${Math.floor(Math.random() * 3) + 1} 0.8s linear 1 forwards, bubble_y 1.5s linear 1 forwards`

            d.dataset.t = String(Date.now());
            praiseBubble.appendChild(d);

            // this.$forceUpdate()

            this.stat.like++
            this.prepareLiskeNum++
            this.offerLikesumAnimateTimer = setTimeout(() => {
                this.prepareLiskeAnimateState = false
            }, 500)
            this.offerLikesumTimer = setTimeout(() => {
                this.ispostOfferLike = false
                this.postOfferLike()
            }, 2000)
        },

        postOfferLike() {
            if (this.ispostOfferLike) return
            this.ispostOfferLike = true

            this.offerLikesum = 0

            this.prepareLiskeState = false
            let key = new Date().getTime() + ''
            // let num = util.base64_encode(key + util.base64_encode(this.data.prepareLiskeNum + ''))



            // util.wxpost("/miniprogramApi/offer/behaviour/like", {
            //     token: this.data.token,
            //     num,
            //     key
            // }).then(res => {
            //     if (res.code != 200) return
            //     let data = res.data
            //     this.offerLikesum = 0
            // }).finally(() => {
            //     this.setData({
            //         prepareLiskeState: false
            //     })
            // })

        },


        // 点击转发
        transmit() {
            let value = location.href
            this.$copy(value, "已经复制链接，欢迎分享！")
        },

        setValue(key, value) {
            this[key] = value
        },

        // 收藏
        postcollect() {
            console.log("点击收藏");
        }

    },

    components: {
        DetailReply, Coins
    }
};
</script>

<style lang="scss" scoped>
.container {
    margin-top: 1.3rem;
    padding-bottom: 2.8rem;

    .aaa {
        color: red;
    }

    .detail-head {
        color: #7F7F7F;
        padding: .191rem 0.2933rem 0;
        justify-content: space-between;

        .detail-section {
            justify-content: space-between;
            font-size: .32rem;

            .section-name {
                color: #333;
            }
        }

        .detail-data {
            color: rgb(127, 127, 127);

            .detail-data-item {
                color: rgb(127, 127, 127);
                font-size: .28rem;

                img {
                    margin-right: .12rem;
                }

                .detail-data-eye {
                    width: .36rem;
                    height: .36rem;
                }

                .detail-data-comment {
                    width: .32rem;
                    height: .32rem;
                }

                &:last-of-type {
                    margin-left: .32rem;
                }
            }
        }
    }

    .detail-title-box {
        padding: .72rem 0.2933rem 0;
        color: #000;
        font-size: .56rem;
        font-weight: 650;

        .detail-title-item {
            font-size: .32rem;
            color: #fff;
            height: .64rem;
            display: inline-flex;
            margin-right: .16rem;
            font-weight: 400;

            &.detail-title-jinghua {
                width: 1rem;
                border-radius: .5rem .5rem 0;
                background: linear-gradient(-57.3808deg, rgb(178, 152, 232) 0%, rgb(88, 70, 195) 100%);
            }

            &.detail-title-label {
                background: rgb(51, 51, 51);
                padding: 0 .16rem;
                display: inline-flex;
                border-radius: .16rem;


            }

        }

    }

    .card {
        margin-top: .48rem;
        flex-direction: column;

        .card-item {
            width: 9.4rem;
            border-radius: .4rem;
            background: #fff;
            margin-bottom: .4rem;

            .card-head {
                padding: .48rem .32rem;
                border-bottom: .0133rem solid #ebebeb;

                .card-head-icon {
                    width: .96rem;
                    height: .96rem;
                    border-radius: 50%;
                    margin-right: .28rem;
                }

                .card-head-content {
                    flex-direction: column;

                    .card-head-name {
                        color: #333;
                        font-size: .32rem;
                        margin-bottom: .08rem;

                        .landlord {
                            color: rgb(127, 127, 127);
                            font-size: .26rem;
                            width: .64rem;
                            height: .44rem;
                            border: rgb(215, 215, 215) .0133rem solid;
                            background: rgb(240, 242, 245);
                            border-radius: .1rem;
                            margin-left: .16rem;
                        }
                    }

                    .card-head-time {
                        color: rgb(127, 127, 127);
                        font-size: .28rem;
                    }
                }

                .card-head-fool {
                    color: rgb(127, 127, 127);
                    font-size: .32rem;
                }
            }

            .card-content {
                color: #333;
                font-size: .36rem;
                line-height: .6rem;
                padding: .5rem .32rem;

                .quotation {
                    width: 100%;
                    color: #333;
                    font-size: .32rem;
                    border-radius: .16rem;
                    background: rgb(246, 246, 246);
                    padding: .36rem .24rem;
                    box-sizing: border-box;
                    margin-bottom: .48rem;

                    .quotation-wenzi {
                        line-height: .52rem;
                    }

                    .quotation-icon {
                        width: .32rem;
                        height: .26rem;
                    }

                    .quotation-right {
                        flex-direction: column;
                        margin-left: .28rem;

                        .quotation-bottom {
                            color: #7F7F7F;
                            font-size: .28rem;
                            margin-top: .258rem;

                            .quotation-icon {
                                margin-left: .2rem;
                            }
                        }
                    }
                }

                .content-unlock {
                    min-height: 3.2rem;
                    background: rgba(242, 242, 242, 0.7);
                    margin: .48rem 0;

                    .unlock-icom {
                        width: .64rem;
                        height: .64rem;
                        margin-right: 0.2rem;
                    }

                    color: #555555;
                    font-size: .32rem;
                    border-radius: .16rem;

                    .content-already-header {
                        color: #7f7f7f;
                        font-size: .28rem;
                        justify-content: center;
                    }
                }

            }
        }
    }

    .paging {
        margin-top: .48rem;

        ::v-deep {
            .el-pagination.is-background .el-pager li:not(.disabled).active {
                background: rgba(98, 177, 255, 1);
                border-radius: 50%;
            }

            .el-pagination .btn-next .el-icon,
            .el-pagination .btn-prev .el-icon {
                font-size: .4rem;
            }
        }
    }

    .discuss-bottom {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff;
        padding: 0 0.4rem;
        box-sizing: border-box;
        z-index: 99;
        border-top: 0.0133rem solid #dbdcdd;
        padding-right: 0;
        height: 2rem;
        width: 10rem;
        justify-content: space-between;


        .swiper {
            height: 2rem;
        }


        .bottom-item {
            justify-content: space-between;
            height: 100%;

            .bottom-comment {
                width: 4.6rem;
                height: 0.8rem;
                border-radius: 1rem;
                padding: 0 0.28rem;
                font-size: 0.32rem;
                color: #aaaaaa;
                background-color: #f2f2f2;
                border: 0.0133rem solid #ebebeb;
                box-sizing: border-box;
                position: relative;

                .bottom-comment-icom {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.16rem;
                }

            }

            .bottom-operation-box {
                width: 3.8667rem;
                justify-content: space-between;
            }

            .bottom-operation-icom {
                width: 0.48rem;
                height: 0.48rem;
                margin-bottom: 0.1333rem;
            }

            .bottom-operation-item {
                position: relative;
                padding: 0 0.4rem;
            }

            .bottom-operation-button {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: transparent;
                padding: 0;
                margin: 0;
                border: none;
                outline: none;

                &::after {
                    border: none;
                }
            }

            .bottom-transmit-icom {
                width: 0.4rem;
                height: 0.4rem;
            }

            .bottom-operation-text {
                font-size: 0.32rem;
                color: #555555;
            }

            .bottom-information {
                position: relative;
                min-width: 4.6667rem;
                max-width: 53.3333rem;
                height: 0.8rem;
                border-radius: 1rem;
                background: linear-gradient(to right, #fff, #50e3c2, #50e3c2, #50e3c2);
            }

            .bottom-information-avatar {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 50%;
            }

            .bottom-information-content {
                color: #fff;
                font-size: 0.2933rem;
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding: 0 0.1333rem;

                .vertical {
                    height: 0.2933rem;
                    background-color: #fff;
                    width: 0.0133rem;
                }
            }



            .bottom-information-item:not(:last-of-type) {
                justify-content: center;
            }

        }

        .praise_bubble {
            width: 50px;
            height: 200px;
            position: absolute;
            bottom: 1.2rem;
            background-color: transparent;

            .bubble {
                position: absolute;
                width: 40px;
                height: 40px;
                left: 0;
                bottom: 0px;
                background-repeat: no-repeat;
                background-size: 100%;
                transform-origin: bottom;
            }


        }

    }

}

@keyframes bubble_11 {
    25% {
        margin-left: -10px;
    }

    50% {
        margin-left: -10px;
    }

    100% {
        margin-left: -18px;
    }
}

@keyframes bubble_10 {
    25% {
        margin-left: -20px;
    }

    50% {
        margin-left: -20px;
    }

    100% {
        margin-left: -20px;
    }
}

@keyframes bubble_9 {
    25% {
        margin-left: 10px;
    }

    50% {
        margin-left: 10px;
    }

    100% {
        margin-left: 10px;
    }
}

@keyframes bubble_8 {
    25% {
        margin-left: 20px;
    }

    50% {
        margin-left: 20px;
    }

    100% {
        margin-left: 20px;
    }
}

@keyframes bubble_7 {
    25% {
        margin-left: 3px;
    }

    50% {
        margin-left: 1px;
    }

    75% {
        margin-left: 2px;
    }

    100% {
        margin-left: 3px;
    }
}

@keyframes bubble_6 {
    25% {
        margin-left: -3px;
    }

    50% {
        margin-left: -1px;
    }

    75% {
        margin-left: -2px;
    }

    100% {
        margin-left: -3px;
    }
}

@keyframes bubble_5 {
    25% {
        margin-left: 5px;
    }

    50% {
        margin-left: -5px;
    }

    75% {
        margin-left: -10px;
    }

    100% {
        margin-left: -20px;
    }
}

@keyframes bubble_4 {
    25% {
        margin-left: -5px;
    }

    50% {
        margin-left: -5px;
    }

    75% {
        margin-left: 20px;
    }

    100% {
        margin-left: 10px;
    }
}

@keyframes bubble_3 {
    25% {
        margin-left: -20px;
    }

    50% {
        margin-left: 10px;
    }

    75% {
        margin-left: 20px;
    }

    100% {
        margin-left: -10px;
    }
}

@keyframes bubble_2 {
    25% {
        margin-left: 20px;
    }

    50% {
        margin-left: 25px;
    }

    75% {
        margin-left: 10px;
    }

    100% {
        margin-left: 5px;
    }
}

@keyframes bubble_1 {
    25% {
        margin-left: -8px;
    }

    50% {
        margin-left: 8px;
    }

    75% {
        margin-left: -15px;
    }

    100% {
        margin-left: 15px;
    }
}

@keyframes bubble_big_1 {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(1.2);
    }
}

@keyframes bubble_big_2 {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes bubble_big_3 {
    0% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(0.6);
    }
}

@keyframes bubble_y {
    0% {
        margin-bottom: 0;
    }

    10% {
        margin-bottom: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        margin-bottom: 200px;
        opacity: 0;
    }
}
</style>