xmg_client/src/pages/library/subpages/book_giveaway.vue

<template>
    <div class="box">
        <el-image class="return-button" :src="require_('@/assets/img/list_return_button.png')" fit="cover"
            @click="act_return"></el-image>

        <el-row class="box-content">
            <el-col :span="18" :offset="3" style="height: 100%;">
                <el-scrollbar>
                    <el-row v-for="item in bookPromoteDataList" :key="item.id">
                        <el-col :span="23">
                            <span class="title" @click="act_showArticle(item)">
                                {{ item.title }}
                            </span>
                        </el-col>
                    </el-row>
                </el-scrollbar>
            </el-col>
        </el-row>

        <el-dialog v-model="g_dialogTableVisible" width="80%" style="background-color: #e6e6e6;">
            <el-image style="width: 100%; height: auto; padding-bottom: 1vh;" v-for="(article, aindex) in g_articlePath"
                :key="aindex" :src="article" fit="contain" />
        </el-dialog>
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { require_ } from "@/utils/require";
import { getBooksDataList } from "@/http/pages/library";


/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: g_route
 ************************************************/
const g_useRouter = useRouter();
// 介绍框
const g_dialogTableVisible = ref(false);
// 介绍框高度
const g_introductionHeight = ref(`${window.innerHeight * 0.6}px`);
// 书本数据
const bookPromoteDataList = ref([]);
// 文章路径
const g_articlePath = ref([]);


/************************************************
 * 生命周期函数
 ************************************************/
onMounted(() => {
    get_dataList();
})

/************************************************
 * 事件处理
 *
 * 格式: act_ + 事件名     例如: act_resolvingIdentity
 ************************************************/
// 返回
const act_return = () => {
    g_useRouter.go(-1);
}

/**
 * 显示文章
 */
const act_showArticle = (item) => {
    g_introductionHeight.value = window.innerHeight * 0.7 + 'px';
    g_articlePath.value = item.path;
    g_dialogTableVisible.value = true;
}


/************************************************
 * 获取数据
 *
 * 格式: get_ + 事件名     例如: get_dataList
 ************************************************/
// 获取数据
const get_dataList = async () => {
    const params = {
        company_app_id: "3",
        data_type: "6"
    };
    const dataList = await getBooksDataList(params);

    if (dataList.code == 200) {
        dataList.data.forEach((item, index) => {
            const tempFilePath = `https://seaelibrary.xmu.edu.cn/prod-api${item.path}`;
            const filePathArray = [tempFilePath];
            if (item.count > 1) {
                let temp = tempFilePath.substring(0, tempFilePath.length - 6);
                for (let j = 1; j < item.count; j++) {
                    if (j < 10) {
                        filePathArray.push(temp + '0' + j + '.png');
                    } else {
                        filePathArray.push(temp + j + '.png');
                    }
                }
            }
            item.path = [...new Set(filePathArray)];
        })
        bookPromoteDataList.value = dataList.data
    }
}
</script>

<style scoped>
.box {
    background-image: url("@/assets/img/list.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}


.box-content {
    height: 100%;
    padding: 11vh 0;
}

.title {
    font-size: 2rem;
    line-height: 4.5rem;
    font-weight: bold;
    color: #421205;
    margin-left: 30px;
    border-bottom: 2px solid rgba(66, 18, 5, 0.5);
    letter-spacing: 0.25rem;
    cursor: pointer;
}

.title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    visibility: hidden;
    width: 50px;
    height: 50px;
    background-image: url("@/assets/img/selected.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: all .3s;
}

.title:hover::before {
    visibility: visible;
    opacity: 1;
    transition: all 0.3s;
}

.return-button {
    visibility: visible;
    position: absolute;
    top: 8px;
    right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-width: 80px;
    width: 8vw;
    z-index: 100;
}

@media screen and (max-width: 1200px) {
    .title {
        font-size: 1rem;
        line-height: 2.5rem;
    }
}

@media screen and (orientation: portrait) {
    .return-button {
        width: 16vw;
    }
}
</style>