pblUserManage/src/views/versionInstr.vue

<template>
    <div class="version_instr">
        <div class="version_head">
            <div class="version_title">
                <img src="../assets/version.png" alt="">
                <div style="font-size: 14px;">{{ message }}</div>
            </div>
            <div class="versionBtn" @click="handleClick">
                <div style="font-size: 14px;">{{ type === '1' ? '查看更新日历' : '返回' }}</div>
                <img v-if="type === '1'" src="../assets/date.png" alt="">
            </div>
        </div>
        <div class="version_middle">
            <div class="v_m_title">{{ tableData[0].update_title }}</div>
            <div class="v_m_instr">{{ tableData[0].update_desc }}</div>

        </div>
        <div class="version_content">
            <div class="version_left">
                <div style="font-size: 12px;">{{ tableData[0].update_at }}</div>
                <div class="v_l_items">
                    <div class="v_l_item" v-for="(tag, index) in tagNameArray" :key="index">{{ tag }}</div>
                </div>

            </div>
            <div class="version_right">
                <p style="font-size: 18px;margin-bottom: 8px;" v-for="(details, index) in formattedDetails"
                    :key="index">{{ details }}</p>
            </div>
        </div>
    </div>
</template>
<script>
import { API_CONFIG } from '@/common/apiConfig';
import { mapGetters } from 'vuex';
export default {
    name: 'versionInstr',
    data() {
        return {
            message: '版本说明',
            type: this.$route.query.type,
            id: this.$route.query.id,
            tableData: [],

        }
    },
    computed: {
        ...mapGetters(["userid"]),
        tagNameArray() {
            // 将 tagName 字符串转换为数组
            return this.tableData[0].tagName ? this.tableData[0].tagName.split(',').map(tag => tag.trim()) : [];
        },
        formattedDetails() {
            // 检查 tableData 是否有数据，并按换行符分割 update_details
            return this.tableData[0]?.update_details
                ? this.tableData[0].update_details.split('\n')
                : [];
        }
    },
    mounted() {
        this.getData();
        console.log("👉", this.tableData[0]);

    },
    methods: {
        getData() {
            let params = [
                {
                    functionName: "getVersionInstr",
                    uid: this.userid,
                    id: this.id
                }
            ];
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {

                    this.tableData = res.data[0];
                    console.log("👉", this.tableData);

                })
                .catch((err) => {
                    console.log(err);
                });
        },
        formatDate(dateString) {
            // 将字符串转换为 Date 对象
            const date = new Date(dateString);
            // 获取年份、月份和日期
            const year = date.getFullYear();
            const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
            const day = date.getDate();
            // 返回格式化后的字符串
            return `${year}年${month}月${day}日`;
        },
        handleClick() {
            if (this.type === 1) {
                this.$router.push('/updateDate');
            } else {
                // 处理返回操作，例如返回到上一个页面
                this.$router.go(-1);
            }
        }
    }
}
</script>
<style scoped>
.version_instr {
    background-color: #fff;
    height: 100%;
}

.version_head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E7E7E7;
    justify-content: space-between;
    height: 54px;
}

.version_title {
    display: flex;
    margin-left: 23px;
}

.version_title img {
    width: 16px;
    height: 16px;
    margin-right: 7px;
}

.versionBtn {
    gap: 5px;
    display: flex;
    border: 1px solid black;
    padding: 11px;
    border-radius: 5px;
    margin-right: 23px;
    cursor: pointer;
}

.version_middle {
    border-bottom: 1px solid #E7E7E7;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px;
}

.v_m_title {
    font-size: 56px;
}

.v_m_instr {
    color: #00000099;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    /* 限制显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 31px;
}

.version_content {
    display: flex;
    margin: 39px 46px;
    ;
}

.v_l_items {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.v_l_item {
    padding: 2px 6px;
    background: rgb(240, 244, 255);
    color: rgb(51, 112, 255);
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    cursor: pointer;
    max-width: 165px;
}

.version_left {
    max-width: 232px;;
}

.version_right {
    margin-left: 65px;
}


</style>